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 JSONtext()
— Vyřeší slib prostým textemblob()
— Vyřeší příslib pomocí objektu BlobformData()
— 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));