Načítání a chyby

Při pomalém připojení může serveru trvat i několik sekund, než odpoví. Do té doby stránka nemá co ukázat a uživatel neví, jestli se vůbec něco načítá. Stránky proto během čekání ukazují zprávu jako Načítám… (stejně jako Pečeme vaši pizzu… v lekci o časovačích) a odstraní ji, jakmile data dorazí.

A někdy server nemá to, o co si stránka řekne. Odpoví i tak, ale místo souboru pošle chybu s číslem, kterému se říká stavový kód (anglicky status). Ten nejznámější možná znáte z webů: 404 Not Found, adresa neexistuje, třeba kvůli překlepu v názvu souboru. Pro fetch() to chyba není: odpověď jako odpověď. Když ji pak skript čte pomocí odpoved.json(), dostane text Not Found, který není JSON, a skončí chybou SyntaxError: … "Not Found" is not valid JSON.

K tomu je odpoved.ok: je true, když server poslal soubor (stavový kód 200, OK), a false, když odpověděl chybou. Zkontrolujte ho dřív, než začnete data číst:

async function nactiZvirata() {
    zprava.textContent = "Načítám…";
    const odpoved = await fetch("zvirata.json");
    if (!odpoved.ok) {
        zprava.textContent = "Zvířata se nepodařilo načíst.";
        return;
    }
    const zvirata = await odpoved.json();
    zprava.textContent = "";
    // Tady se ukážou zvířata...
}

Zpráva Načítám… se nastaví před fetch(), takže je na stránce po celou dobu, kdy skript čeká. Když odpověď není v pořádku, skript ukáže chybovou zprávu a funkci ukončí pomocí return. Jinak zprávu vyprázdní a ukáže data.

A co když připojení vůbec nefunguje? Pak žádná odpověď nepřijde a samotné fetch() skončí chybou TypeError: Failed to fetch. Tu zachytíte pomocí try/catch z minulé lekce. V náhledu nějaká odpověď přijde vždycky, takže tady budete kontrolovat odpoved.ok.