Soubor ze serveru

Teď si o data řekněte serveru. Funkce fetch() požádá o soubor na adrese, kterou jí dáte. Adresa funguje stejně jako v <script src="script.js">: "recepty.json" znamená soubor recepty.json vedle stránky.

Odpověď nepřijde hned, protože požadavek musí dorazit na server a zpátky. Proto fetch() vrací Promise, tedy hodnotu, která přijde později, jak ji znáte z minulé lekce, a počkáte na ni pomocí await:

async function nactiZvirata() {
    const odpoved = await fetch("zvirata.json");
    const zvirata = await odpoved.json();
    console.log(zvirata[0].jmeno);
}

nactiZvirata();
console.log("Ptám se serveru…");

Ptám se serveru…
Rex

Získání dat má dva kroky:

1. await fetch("zvirata.json") počká na odpověď serveru (anglicky response). Ta říká, jak požadavek dopadl, a nese obsah souboru.
2. await odpoved.json() obsah přečte a převede ho z JSON na pole a objekty, stejně jako JSON.parse(). I čtení chvíli trvá, a tak potřebuje vlastní await.

Oba řádky s await musí být ve funkci označené async. A všimněte si pořadí výpisů: nactiZvirata() pošle požadavek, a zatímco čeká na odpověď, zbytek skriptu běží dál. Data přijdou až později.

Proto je častou chybou použít data mimo funkci:

let zvirata = [];

async function nactiZvirata() {
    const odpoved = await fetch("zvirata.json");
    zvirata = await odpoved.json();
}

nactiZvirata();
console.log(zvirata.length);

0

Když se spustí console.log(), server ještě neodpověděl, a tak je zvirata pořád prázdné pole. Všechno, co data potřebuje, patří do funkce pod oba řádky s await, nebo do funkce, kterou odtud zavoláte.