Vysvětlení rozhraní JavaScript Fetch API
JavaScript Fetch API poskytuje intuitivní způsob zadávání požadavků z vašeho aplikačního klienta spuštěného v prohlížeči.
Je snadno použitelný a využívá moderní syntaxi JavaScriptu. Tento článek je průvodcem, jak používat rozhraní Fetch API.
Table of Contents
Co je JavaScript Fetch API?
JavaScript Fetch API je rozhraní, které moderní prohlížeče poskytují pro zadávání požadavků z frontendu. Poskytuje alternativu ke staršímu AJAX XMLHttpRequest.
Je k dispozici jako globální funkce nazvaná načítání. Při volání s argumenty tato funkce vrací příslib, který se vyřeší jako odpověď. Pomocí funkce načítání můžete provádět nejrůznější požadavky HTTP.
Výhody Fetch API oproti jiným metodám
- Má jednodušší a intuitivnější rozhraní, které se snadno učí a používá. Výsledkem je, že váš kód bude při použití rozhraní Fetch API čistší. XMLHttpRequest je složitější a váš kód není tak čistý, jako když používáte Fetch API.
- Podporuje sliby, což vám umožňuje psát asynchronní kód čistěji. XMLHttpRequest je nepodporuje; místo toho musíte do obslužných rutin událostí přidat zpětná volání. V závislosti na vašich preferencích můžete preferovat rozhraní JavaScript Fetch API.
- Je nativně podporován v prohlížeči. To znamená, že k vytváření požadavků nemusíte přidávat další knihovny. Další knihovny rozšíří váš balíček JavaScriptu a zpomalí váš web.
Pomocí rozhraní Fetch API
Tato část se bude zabývat vytvářením různých požadavků pomocí rozhraní JavaScript Fetch API. K napsání kódu můžete použít libovolný editor, který chcete. Jen se ujistěte, že jste kód spustili v prohlížeči. Spustím to uvnitř značky skriptu v souboru HTML.
Jednoduchá žádost GET
Nejprve se naučíme vytvořit jednoduchý požadavek na získání. Kód k tomu má tuto strukturu:
fetch(url)
Pokud bychom tedy chtěli načítat příspěvky z JSON Placeholder APIudělali byste to následovně:
fetch('https://jsonplaceholder.typicode.com/posts');
Volání funkce vrátí příslib, který vyřeší odpověď API nebo chybu, pokud byla zjištěna. Pro přístup k odpovědi tedy použijeme klíčové slovo wait. Klíčové slovo wait ale můžeme použít pouze v asynchronní funkci.
Takže zabalíme funkci načtení do asynchronní funkce a zavoláme ji. Pokud toto všechno neznáte, zde je podrobný průvodce asynchronním JavaScriptem. Každopádně kód:
async function getData() {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
console.log(response);
}
getData();
Pokud spustíte výše uvedený kód, měli byste ve svém výstupu získat následující výstup.
Výstup indikuje, že funkce načtení vrátila objekt Response. Tento objekt má vlastnosti, které zahrnují stav, záhlaví a tělo. Data odpovědi jsou v těle uložena jako řetězec JSON. Proto musíme extrahovat řetězec a analyzovat JSON, abychom získali data jako objekt JavaScript.
Naštěstí má objekt Response šikovnou metodu nazvanou json(). Tato metoda přečte tělo odpovědi a pokusí se analyzovat řetězec jako JSON. Vrací příslib, který se vyřeší na objekt analyzovaný z JSON.
Tato metoda však vyvolá chybu, pokud tělo není platný řetězec JSON. Proto bychom měli JSON analyzovat pouze v případě, že odpověď má stavový kód 200.
Kód pro získání příspěvků bude tedy následující:
async function getData() {
const response = await fetch(
"https://jsonplaceholder.typicode.com/posts"
);
if (response.status == 200) {
const posts = await response.json();
console.log(posts);
} else {
console.log("Something went wrong:", response.status);
}
}
getData();
Spuštění výše uvedeného kódu přinese následující výsledky:
Toto je pole stovek příspěvků.
Některé koncové body API vyžadují záhlaví. Tyto hlavičky by mohly být použity například pro autorizaci. JavaScript Fetch API poskytuje snadný způsob, jak odeslat záhlaví jako součást požadavku. Chcete-li zadat záhlaví, musíte do volání funkce načíst předat argument options.
fetch(url, options);
Náš předchozí příklad by tedy nyní vypadal takto:
async function getData() {
const response = await fetch(
"https://jsonplaceholder.typicode.com/posts", {
headers: {
'x-auth': '<your auth token>'
}
}
);
if (response.status == 200) {
const posts = await response.json();
console.log(posts);
} else {
console.log("Something went wrong:", response.status);
}
}
getData();
Protože JSONPlaceholder API nevyžaduje autorizační hlavičku, bude výše uvedený kód fungovat jako dříve. Je však důležité vědět, že možnost předat záhlaví existuje.
Předávání v dalších možnostech
Kromě předávání hlaviček můžete funkci načítání předat mnoho dalších možností. Dvě možnosti, kterými budete hodně procházet, jsou metoda žádosti a možnosti těla žádosti.
Odešleme požadavek POST na rozhraní API JSONPlaceholder, abychom ukázali, že je oba předáme. Zde je kód, jak to udělat:
async function getData() {
const response = await fetch(
"https://jsonplaceholder.typicode.com/posts", {
method: 'POST',
body: JSON.stringify({
title: 'Fetch API',
body: 'Lorem Ipsum',
userId: 1,
})
}
);
if (response.status == 200) {
const posts = await response.json();
console.log(posts);
} else {
console.log("Something went wrong:", response.status);
}
}
getData();
V našem objektu options jsme zadali metodu požadavku, kterou chceme použít, a tělo jako vlastnosti. Pro obě vlastnosti jsme poskytli řetězcové argumenty. Pro metodu požadavku jsme poskytli řetězec ‚POST‘, protože chceme vytvořit požadavek POST. Poskytli jsme také řetězec JSON pro vlastnost body. Tento řetězec JSON je tvořen stringováním objektu s potřebnými vlastnostmi.
Spuštění tohoto kódu v prohlížeči poskytuje následující výstup:
Výstupem je objekt, který obsahuje ID, které jsme právě obdrželi ze serveru. Tady je skvělý zdroj pro úplný seznam možností, které můžete předat.
Chyby při používání rozhraní JavaScript Fetch API
#1. Chyby sítě
Při vytváření síťových požadavků je běžné, že dojde k chybám. Funkce načtení vrátí příslib, který se vyřeší podle výsledku nebo odmítne, když dojde k chybě sítě. Proto musíme náš kód zabalit do bloku try/catch. Elegantní řešení síťových chyb.
#2. Jiné chyby
Kromě síťových chyb se můžete setkat i s dalšími chybami, jako jsou 404s, 403s a 500s. Funkce načítání nevyvolá chybu, když se takové chyby vyskytnou. Proto je musíte zkontrolovat kontrolou stavového kódu odpovědi. Například v předchozích příkladech jsme se pokusili analyzovat tělo odpovědi pouze tehdy, když byl stavový kód 200.
#3. Chyby CORS
Další běžné chyby, se kterými se setkáte, jsou chyby CORS. CORS je zkratka pro Cross-Origin Resource Sharing. Origin je jedinečná kombinace protokolu serveru, hostitele a portu. Moje webové stránky by například mohly běžet na localhost, hostiteli, na portu 5500, portu, a obsluhované přes HTTP, protokol. Proto by původ tohoto webu byl http://localhost:5500.
Stejný web odešle požadavek API na https://jsonplaceholder.typicode.com API, jiný původ. Proto tyto dva zdroje, localhost a JSONPlaceholder, sdílejí prostředky. To je Cross-Origin Resource Sharing. Server API však musí povolit CORS, aby to fungovalo. Není tomu tak vždy. Řešením pro řešení takových chyb by bylo zadávat požadavky prostřednictvím proxy serveru s povoleným CORS.
Podpora prohlížeče
fetch API je poměrně moderní funkce. Podle CanIUse.comasi 95 % globálních uživatelů má prohlížeče, které to podporují.
Závěr
JavaScript Fetch API je syntakticky lepší a elegantnější způsob, jak psát frontendy, které vyžadují API. Vzhledem k omezené podpoře prohlížeče můžete zvážit jiné klientské knihovny HTTP.
