fetch und APIs

Mit fetch lädst du Daten aus dem Internet – zum Beispiel von einer API. So kannst du dynamische Inhalte auf deiner Webseite anzeigen: Wetter, Nutzerprofile, Produkte oder Blog-Beiträge, ohne die Seite neu zu laden.

fetch() gibt ein Promise zurück. Die Grundlagen dazu kennst du aus den Kapiteln Promises und async await. JSON als Datentext erklärt das Kapitel JSON.

Was ist eine API?

API steht für Application Programming Interface – eine Schnittstelle, über die Programme miteinander Daten austauschen. Eine Web-API stellt dir eine URL bereit; dein JavaScript sendet eine Anfrage und bekommt eine Antwort zurück – meist als JSON.

In diesem Kapitel nutzen wir die Test-API jsonplaceholder.typicode.com – sie liefert Beispieldaten und eignet sich zum Üben, ohne einen eigenen Server zu betreiben.

Daten mit fetch laden

fetch() sendet standardmäßig eine GET-Anfrage an die angegebene URL. Du übergibst die Adresse als String:

1fetch("https://jsonplaceholder.typicode.com/users/1")
2    .then(function(response) {
3        return response.json();
4    })
5    .then(function(daten) {
6        console.log(daten.name);
7        console.log(daten.email);
8    })
9    .catch(function(fehler) {
10        console.error("Fehler:", fehler);
11    });

Der Code nach fetch() läuft sofort weiter – die Antwort kommt später. Deshalb arbeitest du mit then() oder await.

JSON aus der Antwort lesen

Die Antwort von fetch() ist ein Response-Objekt. Die eigentlichen Daten liegen noch nicht direkt darin – du musst sie erst auslesen. Bei JSON-Antworten verwendest du response.json(). Das liefert wieder ein Promise – deshalb kettet du ein zweites then() an.

Wichtig: Ein erfolgreicher Netzwerkabruf bedeutet nicht automatisch, dass der Server die gewünschten Daten geliefert hat. Prüfe deshalb response.ok – es ist true, wenn der Statuscode zwischen 200 und 299 liegt:

1fetch("https://jsonplaceholder.typicode.com/users/1")
2    .then(function(response) {
3        if (!response.ok) {
4            throw new Error("Anfrage fehlgeschlagen: " + response.status);
5        }
6        return response.json();
7    })
8    .then(function(daten) {
9        console.log(daten);
10    })
11    .catch(function(fehler) {
12        console.error(fehler);
13    });

Mit JSON.parse() musst du hier nicht arbeiten – response.json() erledigt das für dich.

Mit async/await

Mit async/await liest sich derselbe Ablauf deutlich klarer – besonders wenn du mehrere Anfragen hintereinander ausführst:

1async function userLaden() {
2    try {
3        const response = await fetch("https://jsonplaceholder.typicode.com/users/1");
4
5        if (!response.ok) {
6            throw new Error("Anfrage fehlgeschlagen: " + response.status);
7        }
8
9        const user = await response.json();
10        console.log(user.name);
11        console.log(user.email);
12    } catch (fehler) {
13        console.error("Fehler:", fehler);
14    }
15}
16
17userLaden();

Fehler fängst du mit try/catch ab – genau wie im Kapitel async await gezeigt.

Daten auf der Seite anzeigen

Geladene API-Daten kannst du direkt ins HTML schreiben. Dafür brauchst du passende Elemente und greifst mit getElementById() darauf zu:

1<h2 id="user-name"></h2>
2<p id="user-email"></p>

1async function userAnzeigen() {
2    const response = await fetch("https://jsonplaceholder.typicode.com/users/1");
3    const user = await response.json();
4
5    document.getElementById("user-name").textContent = user.name;
6    document.getElementById("user-email").textContent = user.email;
7}
8
9userAnzeigen();

Nach dem Aufruf von userAnzeigen() erscheinen Name und E-Mail auf der Seite – die Inhalte kommen aus dem Internet, nicht aus dem statischen HTML.

Kurz gesagt: Eine API liefert Daten über eine URL. Mit fetch() holst du sie, mit response.json() wandelst du sie in ein JavaScript-Objekt um – und damit füllst du deine Webseite dynamisch.