Abrufen und Arbeiten mit APIs in JavaScript
Was ist eine API und wie interagieren wir mit ihr?
Eine API (Application Programming Interface) ist eine Sammlung von Regeln und Protokollen, die es verschiedenen Softwareanwendungen ermöglichen, miteinander zu kommunizieren.
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.
Wenn Sie neu bei JSON sind oder ein tieferes Verständnis darüber erlangen möchten, wie es funktioniert, lesen Sie den Artikel Understanding and Working with JSON Data
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.
index.html
index.js
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).
index.html
index.js
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.
index.html
index.js
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.
1. Was gibt die Funktion fetch()
zurück?
2. Welchen Zweck hat die Verwendung von try...catch
mit fetch()
?
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Can you explain how to use the fetch() function in more detail?
What are some common HTTP status codes I should look out for when working with APIs?
How do I handle errors when making API requests in JavaScript?
Awesome!
Completion rate improved to 2.22
Abrufen und Arbeiten mit APIs in JavaScript
Swipe um das Menü anzuzeigen
Was ist eine API und wie interagieren wir mit ihr?
Eine API (Application Programming Interface) ist eine Sammlung von Regeln und Protokollen, die es verschiedenen Softwareanwendungen ermöglichen, miteinander zu kommunizieren.
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.
Wenn Sie neu bei JSON sind oder ein tieferes Verständnis darüber erlangen möchten, wie es funktioniert, lesen Sie den Artikel Understanding and Working with JSON Data
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.
index.html
index.js
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).
index.html
index.js
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.
index.html
index.js
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.
1. Was gibt die Funktion fetch()
zurück?
2. Welchen Zweck hat die Verwendung von try...catch
mit fetch()
?
Danke für Ihr Feedback!