Was ist eine API und wie interagieren wir mit ihr?

In der Webentwicklung ermöglichen APIs Ihrem JavaScript-Code die Interaktion mit externen Diensten, wie zum Beispiel das Abrufen von Daten von einem Server, das Übermitteln von Formulardaten oder die Integration von Drittanbieterdiensten.

In modernen JavaScript-Anwendungen werden APIs häufig verwendet, um:

• Daten von einem Server abzurufen (z. B. Wetterdaten, Nachrichtenartikel oder Produktdetails);
• Daten an einen Server zu senden (z. B. das Absenden eines Formulars oder das Speichern von Benutzereinstellungen);
• Mit Drittanbieterdiensten zu arbeiten (z. B. Google Maps, Twitter API, Zahlungs-Gateways).

Die Interaktion mit APIs erfolgt durch das Senden von HTTP-Anfragen an einen API-Endpunkt. Der Server antwortet mit Daten, typischerweise im JSON-Format.

HTTP-Anfragen mit fetch() senden

Die Funktion fetch() ist eine moderne Methode, um Netzwerk-Anfragen in JavaScript zu stellen. Sie gibt ein Promise zurück, das aufgelöst wird, sobald die Anfrage abgeschlossen ist.

Dieses Beispiel veranschaulicht das Senden einer HTTP-GET-Anfrage an eine API mit fetch(). Die Funktion fetchData sendet eine Anfrage an den angegebenen Endpunkt (https://jsonplaceholder.typicode.com/posts/1). Sobald die Antwort empfangen wurde, analysiert response.json() die JSON-Daten. Der Titel des Beitrags wird anschließend aus den analysierten Daten extrahiert und im HTML-Absatz angezeigt.

Umgang mit API-Antworten: Parsen von JSON und Überprüfen des Antwortstatus

Nach dem Senden einer API-Anfrage ist es wichtig zu überprüfen, ob die Anfrage erfolgreich war, und die Antwort korrekt zu verarbeiten. In den meisten Fällen werden die von einer API zurückgegebenen Daten im JSON-Format bereitgestellt, daher müssen sie mit response.json() geparst werden.

Zusätzlich sollte immer der Antwortstatus überprüft werden, um sicherzustellen, dass die Anfrage erfolgreich war (Statuscode 200–299).

Dieses Beispiel zeigt, wie der Antwortstatus einer API-Anfrage behandelt wird. Die Funktion fetchAndCheckStatus sendet eine Anfrage an einen API-Endpunkt und prüft anschließend, ob die Antwort erfolgreich ist, indem response.ok verwendet wird. Diese Methode gibt true für Statuscodes im Bereich von 200–299 zurück. Ist die Anfrage erfolgreich, werden die JSON-Daten geparst und angezeigt. Schlägt die Anfrage fehl, wird der Fehlerstatuscode im HTML ausgegeben.

Fehlerbehandlung bei APIs und Umgang mit Netzwerkfehlern

Beim Arbeiten mit APIs ist es entscheidend, potenzielle Fehler zu berücksichtigen, wie zum Beispiel:

• Netzwerkfehler: Der Server ist möglicherweise aufgrund von Netzwerkproblemen nicht erreichbar;
• Ungültige Antworten: Die API kann einen Fehler zurückgeben (z. B. 404 Not Found oder 500 Server Error).

Fehler können durch die Verwendung von try...catch zusammen mit fetch() behandelt werden, um sowohl Netzwerkfehler als auch Fehler in der API-Antwort zu verwalten.

Dieses Beispiel zeigt, wie API-Fehler effektiv behandelt werden können. Die Funktion fetchWithErrorHandling verwendet try...catch, um sowohl Netzwerkfehler als auch ungültige API-Antworten zu verwalten. Wenn die Anfrage an die ungültige URL fehlschlägt oder der Statuscode der Antwort außerhalb des Bereichs 200–299 liegt, wird ein Fehler mit einer spezifischen Nachricht ausgelöst. Der catch-Block zeigt dann die Fehlermeldung im HTML an. Diese Methode stellt sicher, dass alle Probleme mit dem API-Aufruf, wie ein fehlerhafter Endpunkt oder Verbindungsprobleme, elegant behandelt und dem Benutzer klar kommuniziert werden.