Jak používat rozhraní Fetch API k ZÍSKÁNÍ a POST dat v JavaScriptu

JavaScript Fetch API poskytuje jednoduché rozhraní pro načítání zdroje. Je to nejnovější standard pro zpracování síťových požadavků v prohlížeči.

Největší výhodou Fetch oproti XMLHttpRequest(XHR) je to, že první používá sliby, které práci s požadavky a odpověďmi značně usnadňují. Nemusíte se starat o zpětná volání a standardní kód, který je součástí XHR.

Od verze ES7 je nyní Fetch plně implementováno v prohlížeči Chrome. Můžete dokonce použít async-await a zcela se zbavit slibů.

Jak používat rozhraní Fetch API?

fetch() metoda je dostupná v globálním window rozsah, přičemž prvním parametrem je adresa URL, kterou chcete volat. Ve výchozím nastavení vytváří rozhraní Fetch API požadavek GET. Velmi jednoduchý požadavek HTTP s fetch() bude vypadat níže:

// `url` - the URL you want to call
fetch(url)
    .then(res => {
        // code to handle the response data
    }).catch(err => {
        // code to handle request errors
    });

Vypadat čistě a jednoduše? K získávání a odesílání dat použijeme rozhraní Fetch API.

Získání dat pomocí funkce Načíst

Abychom předvedli, jak funguje požadavek Fetch GET, zavoláme rozhraní GitHub API, abychom získali seznam uživatelů. K zobrazení uživatelů na webové stránce pak použijeme vanilkový JavaScript.

Začněme s HTML. Potřebujeme pouze nadpis a neuspořádaný seznam:

<h1>GitHub Users</h1>
<ul id="users"></ul>

Než skutečně zavoláme fetch() Nejprve získáme prvek seznamu z DOM, kam vložíme informace o uživatelích:

// List Element
const ul = document.querySelector('#users'); 

// GitHub API URL
const url = 'https://api.github.com/users';

Nyní se pustíme do skutečné práce – voláním rozhraní Fetch API získáte seznam uživatelů:

fetch(url)
    .then(res => {
        // code to handle the response
    }).catch(err => {
        // code to handle errors
    });

fetch() metoda vrací příslib, který volá then() metoda s objektem odezvy při splnění. Objekt odpovědi má několik metod, jak zpracovat odpověď tak, jak chceme. Zde je několik z těchto metod:

  • json() — Vyřeší příslib pomocí objektu JSON
  • text() — Vyřeší slib prostým textem
  • blob() — Vyřeší příslib pomocí objektu Blob
  • formData() — Vyřeší sliby pomocí objektu FormData

Volání kterékoli z výše uvedených metod vrátí nový příslib. Protože naše odpověď API je řetězec JSON, chceme použít json() :

fetch(url)
    .then(res => res.json())
    .then(data => {
        // code to handle the response
    }).catch(err => {
        console.error('Error: ', err);
    });

Skvělý! S částí požadavku Fetch API jsme hotovi. Nyní je čas napsat nějaký vanilkový JavaScript kód. Vytvořme dvě pomocné funkce pro připojení a vytvoření nových prvků:

// create an element
const createNode = (elem) => {
    return document.createElement(elem);
};

// append an element to parent
const appendNode = (parent, elem) => {
    parent.appendChild(elem);
}

Nyní můžeme přejít k analýze objektu JSON, vytvoření a připojení položek seznamu k našemu neuspořádanému seznamu:

// ...
.then(data => {
    // iterate over users
    data.map((user) => {
        // create the elements
        let li = createNode('li'),
            img = createNode('img'),
            span = createNode('span');
        img.src = user.avatar_url;
        span.innerText = user.login;
        // append all elements
        appendNode(li, img);
        appendNode(li, span);
        appendNode(ul, li);
    });
})
// ...

Výše uvedený kód je samovysvětlující. Iterujeme všechny uživatele a pro každého uživatele vytvoříme položku seznamu, obrázek a rozsah. Aktualizujeme zdroj obrázku, nastavíme text rozpětí na zobrazované jméno uživatele a poté je připojíme k jejich nadřazenému prvku. To je ono.

Zde je návod, jak to vypadá v prohlížeči (poté, co jsem přidal nějaké CSS z Bootstrapu):

A úplný kód našeho požadavku Fetch je následující:

// create an element
const createNode = (elem) => {
    return document.createElement(elem);
};

// append an element to parent
const appendNode = (parent, elem) => {
    parent.appendChild(elem);
}

// List Element
const ul = document.querySelector('#users');

// GitHub API URL
const url = 'https://api.github.com/users';

// make the API call
fetch(url)
    .then(res => res.json())
    .then(data => {
        // iterate over users
        data.map((user) => {
            // create the elements
            let li = createNode('li'),
                img = createNode('img'),
                span = createNode('span');
            img.src = user.avatar_url;
            span.innerText = user.login;
            // append all elements
            appendNode(li, img);
            appendNode(li, span);
            appendNode(ul, li);
        });
    }).catch(err => {
        console.error('Error: ', err);
    });

Použití funkce Načíst k odeslání dat

Rozhraní Fetch API není omezeno pouze na požadavky GET. Všechny ostatní typy požadavků (POST, PUT, DELETE atd.) můžete provádět s vlastními hlavičkami požadavků a daty příspěvků. Zde je příklad požadavku POST:

const url = 'https://reqres.in/api/users';

// post body data 
const user = {
    first_name: 'John',
    last_name: 'Doe',
    job_title: 'Blogger'
};

// request options
const options = {
    method: 'POST',
    body: JSON.stringify(user),
    headers: {
        'Content-Type': 'application/json'
    }
}

// send POST request
fetch(url, options)
    .then(res => res.json())
    .then(res => console.log(res));

Místo objektového literálu můžeme také vytvořit objekt požadavku se všemi možnostmi a předat jej fetch() metoda:

const url = 'https://reqres.in/api/users';

// post body data 
const user = {
    first_name: 'John',
    last_name: 'Doe',
    job_title: 'Blogger'
};

// create request object
const request = new Request(url, {
    method: 'POST',
    body: JSON.stringify(user),
    headers: new Headers({
        'Content-Type': 'application/json'
    })
});

// pass request object to `fetch()`
fetch(request)
    .then(res => res.json())
    .then(res => console.log(res));