Laden und Fehler

Bei einer langsamen Verbindung kann ein Server mehrere Sekunden brauchen, um zu antworten. Bis dahin hat die Seite nichts zu zeigen, und der Nutzer weiß nicht, ob überhaupt etwas kommt. Darum zeigen Seiten, während sie warten, eine Meldung wie Lade…, wie das Pizza wird gebacken… der Pizzeria in der vorigen Lektion, und entfernen sie, wenn die Daten da sind.

Und manchmal hat der Server nicht, wonach die Seite fragt. Er antwortet trotzdem, aber statt der Datei schickt er einen Fehler mit einer Nummer, dem Status. Den berühmtesten kennst du vielleicht von Websites: 404 Not Found, die Adresse existiert nicht, zum Beispiel weil der Dateiname falsch geschrieben ist. Für fetch() ist das kein Fehler: Eine Antwort ist eine Antwort. Wenn das Skript sie dann mit antwort.json() liest, bekommt es den Text Not Found, der kein JSON ist, und endet mit SyntaxError: … "Not Found" is not valid JSON.

Dafür gibt es antwort.ok: Es ist true, wenn der Server die Datei geschickt hat (Status 200, OK), und false, wenn er mit einem Fehler geantwortet hat. Prüfe es, bevor du die Daten liest:

async function ladeTiere() {
    nachricht.textContent = "Lade…";
    const antwort = await fetch("tiere.json");
    if (!antwort.ok) {
        nachricht.textContent = "Die Tiere konnten nicht geladen werden.";
        return;
    }
    const tiere = await antwort.json();
    nachricht.textContent = "";
    // Zeige die Tiere hier an...
}

Die Meldung Lade… wird vor fetch() gesetzt, sie steht also die ganze Zeit auf der Seite, während das Skript wartet. Wenn die Antwort nicht OK ist, zeigt das Skript eine Fehlermeldung an und beendet die Funktion mit return. Sonst leert es die Meldung und zeigt die Daten an.

Und was, wenn es gar keine Verbindung gibt? Dann kommt keine Antwort, und fetch() selbst schlägt mit TypeError: Failed to fetch fehl. Das ist ein Fehler, den du mit try/catch aus der vorigen Lektion abfangen kannst. In der Vorschau antworten die Dateien der Übung immer, also prüfst du hier antwort.ok.