JavaScript Fetch API
Die Fetch API ist eine zentrale Funktion in JavaScript, die es Entwicklern ermöglicht, Netzwerkanfragen mit Promises auszuführen, was einen modernen, asynchronen Ansatz für die Webentwicklung unterstützt. Dieser Leitfaden bietet einen praktischen Einblick, wie die Fetch API implementiert wird, und verwendet die JSONPlaceholder API für Beispiele aus der Praxis, um ihre Möglichkeiten zu demonstrieren.
Die Fetch API verstehen
Die Fetch API ist für die Netzwerkkommunikation konzipiert und verwendet ein Promise-basiertes System, um Ressourcen abzurufen. Sie ist flexibel genug, um verschiedene Datenformate und komplexe Anfragen zu verarbeiten, was sie zu einer ausgezeichneten Wahl für die Entwicklung von Webanwendungen macht.
Grundlegende Verwendung von Fetch
Lassen Sie uns in ein einfaches Beispiel zum Abrufen von Daten aus einem JSONPlaceholder-Post eintauchen:
Dieses Snippet ruft Daten aus einem bestimmten Post ab und zeigt, wie Fetch ein Promise zurückgibt, das sich zur Antwort der Anfrage auflöst. Die Antwort wird anschließend als JSON geparst und in der Konsole ausgegeben.
Fehlerbehandlung bei Fetch
Die Fehlerbehandlung ist entscheidend, wenn Sie mit Netzwerkanfragen arbeiten. Die Fetch API vereinfacht das Fehlermanagement und sorgt für robuste Anwendungen. Hier ist ein Beispiel mit Fehlerbehandlung:
In diesem Beispiel prüfen wir, ob die Antwort erfolgreich ist; wenn nicht, wird ein Fehler ausgelöst. Die Methode .catch() fängt alle Fehler ab und erhält so die Integrität der Anwendung.
Eine POST-Anfrage implementieren
Die Fetch API ist nicht auf GET-Anfragen beschränkt; sie eignet sich ebenso gut für POST-Anfragen, um Daten an einen Server zu senden. So erstellen Sie einen neuen Post mit JSONPlaceholder:
Dieses Code-Snippet zeigt das Senden einer POST-Anfrage mit JSON-Daten und gibt Methode, Body und Header an. Es veranschaulicht die Vielseitigkeit der Fetch API beim Umgang mit verschiedenen Anfragetypen.
Async/Await mit Fetch nutzen
Für einen eleganteren Ansatz bei asynchronem Code kann die Fetch API mit async und await kombiniert werden. Diese Methode bietet eine besser lesbare Syntax, ähnlich wie synchroner Code:
Mit async und await ruft dieses Beispiel einen Post ab, wartet auf die Antwort und verarbeitet sie innerhalb eines try/catch-Blocks zur Fehlerbehandlung. Es zeigt, wie moderne JavaScript-Funktionen die Verwendung der Fetch API vereinfachen können.
Fehler mit Async/Await behandeln
Wenn es um Fehlerbehandlung in async/await geht, wird sie typischerweise mit try-catch-Blöcken umgesetzt.
Um Fehler zu behandeln, die während asynchroner Operationen auftreten können, können Sie Ihre await-Aufrufe in einen try-Block einbetten und alle auftretenden Fehler mit einem catch-Block abfangen. So können Sie die Funktion fetchData um Fehlerbehandlung erweitern:
Fehlerweitergabe
Fehlerweitergabe beschreibt, wie ein Fehler sich „bewegt“ oder von einem Teil Ihres Programms zum nächsten weitergereicht wird. Stellen Sie sich das als den Weg vor, den ein Fehler nimmt, nachdem er aufgetreten ist. Wenn ein Fehler auftritt, ist es, als würde man einen Ball fallen lassen. Bei der Fehlerweitergabe geht es darum, wohin der Ball nach dem Fallen rollt: Fängt ihn jemand auf, oder landet er auf dem Boden?
In JavaScript geschieht dies typischerweise über die Verkettung von Promise-Rejections, wobei eine unbehandelte Ablehnung den Call Stack nach oben wandert, bis ein catch-Block oder ein globaler Handler sie abfängt.
Im folgenden Beispiel gilt: Wenn Fehler von der aufrufenden Funktion (wie viewData) behandelt werden sollen, sollten Sie sie entweder in fetchData nicht abfangen oder sie nach dem Abfangen erneut auslösen:
Wie Sie sehen, wird dasselbe Fehlerobjekt in beiden Funktionen abgefangen, weil wir es von fetchData an viewData erneut auslösen.
Fazit
Die Fetch API ist ein unverzichtbares Werkzeug für JavaScript-Entwickler und bereichert Webanwendungen mit ihrem Promise-basierten Ansatz für Netzwerkanfragen. Anhand praktischer Beispiele zeigt dieser Leitfaden, wie die Fetch API effektiv zum Abrufen von Daten, zur Fehlerbehandlung und zum Senden von POST-Anfragen genutzt werden kann, wobei die JSONPlaceholder API für reale Anwendungsfälle eingesetzt wird. Die Beherrschung der Fetch API befähigt Entwickler dazu, reaktionsschnellere, dynamischere und robustere Webanwendungen zu erstellen.
Practice
Which of the following statements about the Fetch API in JavaScript are true?