Vysvětlení rozhraní JavaScript Fetch API

autor:
Tweet
Share
Share
Pin

Rozhraní JavaScript Fetch API představuje intuitivní metodu pro provádění požadavků z klientské aplikace, která běží ve webovém prohlížeči.

Je charakteristické svou jednoduchostí použití a využitím moderní syntaxe JavaScriptu. Tento článek slouží jako průvodce, který vás provede používáním Fetch API.

Co je JavaScript Fetch API?

JavaScript Fetch API je rozhraní, které poskytují moderní prohlížeče pro odesílání požadavků z frontendové části webových aplikací. Slouží jako alternativa ke staršímu řešení AJAX pomocí XMLHttpRequest.

Je dostupné jako globální funkce s názvem fetch. Po zavolání s parametry tato funkce vrací promise, který se vyřeší jako odpověď. Prostřednictvím funkce fetch můžete realizovat rozmanité HTTP požadavky.

Výhody Fetch API oproti jiným metodám

  • Nabízí jednodušší a intuitivnější rozhraní, které je snadné na naučení a používání. Díky tomu je kód při použití Fetch API čistší. XMLHttpRequest je složitější, a kód tak není tak přehledný jako v případě použití Fetch API.
  • Zahrnuje podporu pro promises, což umožňuje čistší psaní asynchronního kódu. XMLHttpRequest tuto podporu nemá; místo toho je třeba do obslužných rutin událostí přidávat callback funkce. V závislosti na vašich preferencích můžete dát přednost rozhraní JavaScript Fetch API.
  • Je nativně podporováno v prohlížeči. To znamená, že pro vytváření požadavků nemusíte přidávat žádné další knihovny. Přidávání dalších knihoven zvětšuje balíček JavaScriptu a zpomaluje načítání webové stránky.

Používání rozhraní Fetch API

V této sekci se zaměříme na vytváření různých typů požadavků s využitím JavaScript Fetch API. Pro psaní kódu můžete použít libovolný textový editor. Je však nezbytné kód spouštět v prostředí webového prohlížeče. Já jej budu spouštět uvnitř tagu <script> v HTML souboru.

Jednoduchý požadavek GET

Nejprve se naučíme, jak vytvořit základní GET požadavek. Kód pro tento úkol má tuto podobu:

fetch(url)

Pokud bychom chtěli například získat příspěvky z JSON Placeholder API, postupovali bychom takto:

fetch('https://jsonplaceholder.typicode.com/posts');

Volání této funkce vrací promise, který se vyřeší s odpovědí z API, nebo vrátí chybu, pokud nastala. Pro přístup k odpovědi použijeme klíčové slovo await. Toto klíčové slovo však lze použít pouze v rámci asynchronní funkce.

Zabalíme tedy volání funkce fetch do asynchronní funkce a tuto funkci následně zavoláme. Pokud vám tyto koncepty nejsou zcela jasné, zde je podrobný návod o asynchronním JavaScriptu. V každém případě, zde je kód:

async function getData() {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    console.log(response);
}

getData();

Po spuštění uvedeného kódu byste měli ve výstupu vidět následující:

Výstup ukazuje, že funkce fetch vrátila objekt Response. Tento objekt obsahuje vlastnosti jako status, headers a body. Data odpovědi jsou v těle uložena jako JSON řetězec. Proto je potřeba extrahovat řetězec a analyzovat JSON, abychom data získali jako JavaScriptový objekt.

Naštěstí objekt Response obsahuje užitečnou metodu s názvem json(). Tato metoda přečte tělo odpovědi a pokusí se analyzovat řetězec jako JSON. Vrací promise, který se vyřeší na objekt, který vznikl parsováním JSON.

Tato metoda však může vyvolat chybu, pokud tělo není validní JSON řetězec. 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ů tedy bude vypadat takto:

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("Nastala chyba:", response.status);
    }
}
getData();

Po spuštění výše uvedeného kódu se objeví následující výsledek:

Zobrazí se pole obsahující stovky příspěvků.

Některé API koncové body vyžadují nastavení hlaviček. Tyto hlavičky se mohou použít například pro autorizaci. JavaScript Fetch API nabízí jednoduchý způsob, jak odeslat hlavičky jako součást požadavku. Pro definování hlaviček je potřeba do volání funkce fetch přidat argument options.

fetch(url, options);

Náš předchozí příklad by nyní vypadal takto:

async function getData() {
    const response = await fetch(
        "https://jsonplaceholder.typicode.com/posts", {
             headers: {
                 'x-auth': '<váš autorizační token>'
             }
         }
    );

    if (response.status == 200) {
        const posts = await response.json();
        console.log(posts);
    } else {
        console.log("Nastala chyba:", response.status);
    }
}
getData();

Vzhledem k tomu, že JSONPlaceholder API nevyžaduje autorizační hlavičku, výše uvedený kód bude fungovat stejně jako dříve. Je ale důležité vědět, že možnost předávání hlaviček existuje.

Předávání dalších možností

Kromě hlaviček můžete do funkce fetch předávat i další parametry. Dva parametry, které budete často používat, jsou metoda požadavku a tělo požadavku.

Pro demonstraci použití obou parametrů odešleme požadavek POST na JSONPlaceholder API. Zde je kód, jak toho docílit:

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("Nastala chyba:", response.status);
    }
}
getData();

V objektu options jsme specifikovali 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 použili řetězec ‚POST‘, protože chceme odeslat požadavek typu POST. Pro vlastnost body jsme také poskytli JSON řetězec. Tento JSON řetězec vznikl stringifikací objektu s potřebnými vlastnostmi.

Spuštění tohoto kódu v prohlížeči nám poskytne následující výstup:

Výstupem je objekt, který obsahuje ID, které jsme právě obdrželi ze serveru. Zde je užitečný zdroj pro kompletní seznam parametrů, 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 se vyskytnou chyby. Funkce fetch vrací promise, který se vyřeší podle výsledku nebo odmítne, pokud nastane síťová chyba. Z tohoto důvodu je nutné náš kód zabalit do bloku try/catch. To je elegantní řešení pro práci s chybami sítě.

#2. Ostatní chyby

Kromě síťových chyb se můžete setkat i s dalšími chybami, jako jsou chyby 404, 403 a 500. Funkce fetch nevyvolá chybu, když k těmto chybám dojde. Z tohoto důvodu je musíte kontrolovat kontrolou stavového kódu odpovědi. Například v předchozích příkladech jsme se pokusili analyzovat tělo odpovědi pouze v případě, že byl stavový kód 200.

#3. Chyby CORS

Další běžnou chybou, na kterou můžete narazit, jsou chyby CORS. CORS je zkratka pro Cross-Origin Resource Sharing. Origin (původ) je jedinečná kombinace protokolu serveru, hostitele a portu. Moje webová stránka by například mohla běžet na localhost, hostiteli, na portu 5500 a obsluhovaná přes HTTP, protokol. Proto by původ této webové stránky byl http://localhost:5500.

Tato webová stránka odešle požadavek na API na https://jsonplaceholder.typicode.com, což je jiný původ. Z tohoto důvodu tyto dva zdroje, localhost a JSONPlaceholder, sdílejí zdroje. To je Cross-Origin Resource Sharing. Server API však musí mít povolené CORS, aby toto fungovalo. To však nemusí být vždy pravda. Řešením pro práci s těmito chybami by bylo odesílat požadavky přes proxy server s povoleným CORS.

Podpora prohlížeče

Fetch API je poměrně moderní funkce. Podle CanIUse.com, přibližně 95 % uživatelů po celém světě používá prohlížeče, které toto rozhraní podporují.

Závěr

JavaScript Fetch API představuje syntakticky vylepšený a elegantnější způsob, jak psát frontendové aplikace, které pracují s API. Vzhledem k omezené podpoře u některých prohlížečů můžete zvážit použití jiných klientských HTTP knihoven.