Eine Datei vom Server

Jetzt bitten wir den Server um Daten. Die Funktion fetch() fragt nach einer Datei unter der Adresse, die du ihr gibst. Die Adresse funktioniert wie in <script src="script.js">: "rezepte.json" bedeutet die Datei rezepte.json neben der Seite.

Die Antwort kommt nicht sofort, denn die Anfrage muss zum Server und zurück reisen. Darum gibt fetch() ein Promise zurück, einen Wert, der später eintrifft, wie du aus der vorigen Lektion weißt, und du wartest mit await darauf:

async function ladeTiere() {
    const antwort = await fetch("tiere.json");
    const tiere = await antwort.json();
    console.log(tiere[0].name);
}

ladeTiere();
console.log("Frage den Server…");

Frage den Server…
Rex

Die Daten zu bekommen, geht in zwei Schritten:

1. await fetch("tiere.json") wartet auf die Antwort des Servers, die Response. Sie sagt dir, wie die Anfrage gelaufen ist, und enthält den Inhalt der Datei.
2. await antwort.json() liest den Inhalt und wandelt ihn von JSON in Arrays und Objekte um, wie es JSON.parse() tut. Auch das Lesen braucht Zeit, also braucht es ein eigenes await.

Beide await müssen in einer async-Funktion stehen. Und sieh dir die Reihenfolge der Ausgabe an: ladeTiere() schickt die Anfrage, und während es auf die Antwort wartet, läuft der Rest des Skripts. Die Daten kommen erst später.

Darum ist es ein typischer Fehler, die Daten außerhalb der Funktion zu benutzen:

let tiere = [];

async function ladeTiere() {
    const antwort = await fetch("tiere.json");
    tiere = await antwort.json();
}

ladeTiere();
console.log(tiere.length);

0

Wenn console.log() läuft, hat der Server noch nicht geantwortet, also ist tiere noch das leere Array. Alles, was die Daten braucht, gehört in die Funktion, nach den await, oder in eine Funktion, die von dort aufgerufen wird.