Když se načtení nepovede

Stránka v tomto cvičení ukazuje Načítám… a nic víc, ať čekáte jakkoli dlouho. Proč, to říká konzole:

[Vue warn]: Unhandled error during execution of mounted hook
  at <App>
SyntaxError: Failed to execute 'json' on 'Response': Unexpected token 'N', "Not Found" is not valid JSON
    at eval (App.vue:9)

V názvu souboru je překlep: nabidky.json. Takový soubor neexistuje, a tak server odpoví stavovým kódem 404 Not Found, jak to znáte z kurzu JavaScriptu, a místo nabídky pošle text Not Found. Na řádku 9 ho odpoved.json() nedokáže přečíst jako JSON a ohlásí chybu, která funkci v onMounted ukončí. Na řádek nacitani.value = false už nedojde, a tak stránka pořád ukazuje Načítám….

Než data přečtete, zkontrolujte odpoved.ok: je false, když server odpověděl chybou. Zprávu pro zákazníka mějte v refu a nacitani nastavte na false v obou případech:

const chyba = ref("");

onMounted(async () => {
    const odpoved = await fetch("nabidka.json");
    if (!odpoved.ok) {
        chyba.value = "Nabídku se nepodařilo načíst.";
    } else {
        nabidka.value = await odpoved.json();
    }
    nacitani.value = false;
});

V šabloně je zpráva třetí možností mezi těmi dvěma, pomocí v-else-if, které znáte z lekce Podmínky a seznamy:

<template>
    <h1>Kavárna Na Rohu</h1>
    <p v-if="nacitani">Načítám…</p>
    <p v-else-if="chyba" class="chyba">{{ chyba }}</p>
    <ul v-else>
        <li v-for="polozka in nabidka" :key="polozka.id">{{ polozka.nazev }}: {{ polozka.cena }} Kč</li>
    </ul>
</template>

Prázdný text v podmínce platí jako nepravda a každý jiný jako pravda, takže se zpráva ukáže, jen když nějaká je.

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