JavaScript Fetch API

Die Fetch API ist ein zentrales Feature in JavaScript, mit dem Sie Netzwerkanfragen stellen können (Daten herunterladen, Formulare absenden, mit APIs kommunizieren) — sie gibt dabei ein Promise zurück. Sie ist der moderne Ersatz für das ältere XMLHttpRequest und lässt sich natürlich mit async/await kombinieren. Dieser Leitfaden behandelt die gängigsten Muster: GET- und POST-Anfragen, das Auswerten der Antwort, das Lesen von JSON und Text, das Senden von Headern sowie die Fehlerbehandlung — anhand der kostenlosen JSONPlaceholder API mit ausführbaren Beispielen.

Die Fetch API verstehen

Die Fetch API ist für die Netzwerkkommunikation konzipiert und verwendet ein auf Promises basierendes System zum Abrufen von Ressourcen. Sie ist flexibel genug, um verschiedene Datenformate und komplexe Anfragen zu verwalten, was sie zu einer hervorragenden Wahl für die Entwicklung von Webanwendungen macht.

Die grundlegende Signatur lautet fetch(url, options). Sie gibt ein Promise zurück, das zu einem Response-object aufgelöst wird, sobald der Server mit den Headern antwortet — bevor der Body vollständig heruntergeladen wurde. Den Body lesen Sie anschließend separat mit einer Methode wie .json() oder .text(), die jeweils ihr eigenes Promise zurückgeben.

Ein wichtiger Fallstrick: fetch() lehnt ein Promise nur bei einem Netzwerk-Fehler ab (keine Verbindung, DNS-Fehler, CORS-Block). Bei HTTP-Fehlerstatus-Codes wie 404 oder 500 wird das Promise nicht abgelehnt — diese werden weiterhin erfolgreich aufgelöst. Sie müssen response.ok (oder response.status) selbst prüfen.

Grundlegende Verwendung von Fetch

Beginnen wir mit einem einfachen Beispiel zum Abrufen von Daten eines JSONPlaceholder-Beitrags:

Dieses Snippet ruft Daten eines bestimmten Beitrags ab und zeigt, wie Fetch ein Promise zurückgibt, das zur Antwort der Anfrage aufgelöst wird. Die Antwort wird anschließend als JSON geparst und in der Konsole ausgegeben.

Die Antwort untersuchen

Das Response-object enthält nützliche Metadaten, noch bevor Sie den Body lesen. Die wichtigsten Eigenschaften sind:

• response.ok — ein boolean, der true ist, wenn der Statuscode im Bereich 200–299 liegt.
• response.status — der numerische HTTP-Statuscode (z. B. 200, 404, 500).
• response.statusText — die Textnachricht, die zum Statuscode gehört (z. B. "OK").
• response.headers — ein Headers-object, das Sie mit .get() abfragen können.

Den Body lesen: .json() vs. .text()

Der Body einer Antwort kann in verschiedenen Formaten gelesen werden. Jede Methode gibt ein Promise zurück und kann pro Antwort nur einmal aufgerufen werden — der Body ist ein Stream, der dabei verbraucht wird:

• response.json() — parst den Body als JSON und löst ihn zu einem JavaScript-object oder array auf.
• response.text() — löst den rohen Body als string auf. Nützlich für einfachen Text, HTML oder wenn Sie das JSON-Parsing selbst übernehmen möchten.
• response.blob() — löst zu einem Blob auf, für Binärdaten wie Bilder oder Dateien.

Fehlerbehandlung in Fetch

Die Fehlerbehandlung ist bei der Arbeit mit Netzwerkanfragen entscheidend. Da fetch() bei HTTP-Fehlerstatus-Codes keine Ausnahme wirft, besteht das Standardmuster darin, response.ok zu prüfen und einen eigenen Fehler zu werfen, wenn der Wert false ist. Hier ist ein Beispiel mit Fehlerbehandlung:

In diesem Beispiel prüfen wir, ob die Antwort erfolgreich ist; falls nicht, wird ein Fehler geworfen. Die Methode .catch() fängt alle Fehler ab und wahrt so die Integrität der Anwendung.

Eine POST-Anfrage implementieren

Die Fetch API ist nicht auf GET-Anfragen beschränkt — sie eignet sich gleichermaßen gut für POST-Anfragen, um Daten an einen Server zu senden. Übergeben Sie ein zweites Argument mit method, einem body und headers. Beim Senden von JSON müssen Sie den Body sowohl mit JSON.stringify() serialisieren als auch den Content-Type-Header setzen, damit der Server weiß, wie er ihn parsen soll. So erstellen Sie einen neuen Beitrag mit JSONPlaceholder:

Dieses Code-Snippet demonstriert das Senden einer POST-Anfrage mit JSON-Daten unter Angabe von Methode, Body und Headern. Es veranschaulicht die Vielseitigkeit der Fetch API beim Umgang mit verschiedenen Anfragetypen.

Benutzerdefinierte Anfrage-Header senden

Header teilen dem Server Informationen über die Anfrage mit — den Content-Typ, das erwartete Antwortformat oder Authentifizierungsdaten wie einen Bearer-Token. Sie können Header als einfaches object übergeben oder sie für mehr Kontrolle mit der Headers-Klasse erstellen:

Hinweis: Eine Anfrage an einen anderen Ursprung ist nur dann erfolgreich, wenn der Server sie per CORS erlaubt. Unter Fetch: Cross-Origin Requests erfahren Sie, wie Cross-Origin-Regeln Header und Anmeldedaten beeinflussen.

Async/Await mit Fetch nutzen

Für einen eleganteren Umgang mit asynchronem Code lässt sich die Fetch API mit async und await kombinieren. Diese Methode bietet eine besser lesbare Syntax, die synchronem Code ähnelt:

Mit async und await ruft dieses Beispiel einen Beitrag ab, wartet auf die Antwort und verarbeitet sie innerhalb eines try/catch-Blocks zur Fehlerbehandlung. Es zeigt, wie moderne JavaScript-Features die Nutzung der Fetch API vereinfachen können.

Fehlerbehandlung mit Async/Await

Bei der Fehlerbehandlung mit async/await kommen in der Regel try-catch-Blöcke zum Einsatz.

Um Fehler zu behandeln, die bei asynchronen Operationen auftreten können, können Sie Ihre await-Aufrufe in einen try-Block einschließen und auftretende Fehler mit einem catch-Block abfangen. So können Sie der Funktion fetchData eine Fehlerbehandlung hinzufügen:

Fehlerweiterleitung

Fehlerweiterleitung beschreibt, wie ein Fehler von einem Teil Ihres Programms zu einem anderen „weitergegeben" wird. Stellen Sie es sich als den Weg vor, den ein Fehler nach seinem Auftreten nimmt. Wenn ein Fehler auftritt, ist es wie das Fallenlassen eines Balls. Die Fehlerweiterleitung beschreibt, wohin der Ball nach dem Fallen geht: Fängt ihn jemand auf, oder trifft er den Boden?

In JavaScript geschieht dies typischerweise durch Promise-Rejection-Chaining, bei dem eine nicht behandelte Ablehnung den Call-Stack aufwärts wandert, bis ein catch-Block oder ein globaler Handler sie abfängt.

Im folgenden Beispiel — wenn Fehler von der aufrufenden Funktion (wie viewData) behandelt werden sollen — sollten Sie es entweder vermeiden, Fehler in fetchData abzufangen, oder sie nach dem Abfangen erneut werfen:

Wie Sie sehen können, wird dasselbe Fehlerobjekt in beiden Funktionen abgefangen, weil wir es von fetchData an viewData weiterwerfen.

Verwandte Themen

Um tiefer in die Fetch API einzutauchen, erkunden Sie diese verwandten Kapitel:

• JavaScript Promise — das Fundament, auf dem Fetch aufbaut.
• Async/Await — die eleganteste Methode, Fetch-Aufrufe zu schreiben.
• Fetch: Abort — eine Anfrage mit AbortController abbrechen (nützlich für Timeouts und Suche während der Eingabe).
• Fetch: Cross-Origin Requests — wie CORS Anfragen an andere Domains kontrolliert.

Fazit

Die Fetch API ist ein unverzichtbares Werkzeug für JavaScript-Entwickler, das Webanwendungen durch ihren promise-basierten Ansatz für Netzwerkanfragen bereichert. Anhand praktischer Beispiele zeigt dieser Leitfaden, wie die Fetch API effektiv zum Abrufen von Daten, zur Fehlerbehandlung und für POST-Anfragen eingesetzt werden kann — unter Verwendung der JSONPlaceholder API für realitätsnahe Anwendungsfälle. Die Beherrschung der Fetch API befähigt Entwickler, reaktionsfähigere, dynamischere und robustere Webanwendungen zu erstellen.

Übungen