Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Abrufen und Arbeiten mit APIs in JavaScript | Asynchrones JavaScript und API-Integration
Fortgeschrittene JavaScript-Beherrschung

bookAbrufen und Arbeiten mit APIs in JavaScript

Was ist eine API und wie interagieren wir mit ihr?

Note
Definition

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.

Note
Mehr erfahren

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.html

index.js

index.js

copy

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.html

index.js

index.js

copy

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.html

index.js

index.js

copy

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()?

question mark

Was gibt die Funktion fetch() zurück?

Select the correct answer

question mark

Welchen Zweck hat die Verwendung von try...catch mit fetch()?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 4. Kapitel 5

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Suggested prompts:

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

bookAbrufen und Arbeiten mit APIs in JavaScript

Swipe um das Menü anzuzeigen

Was ist eine API und wie interagieren wir mit ihr?

Note
Definition

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.

Note
Mehr erfahren

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.html

index.js

index.js

copy

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.html

index.js

index.js

copy

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.html

index.js

index.js

copy

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()?

question mark

Was gibt die Funktion fetch() zurück?

Select the correct answer

question mark

Welchen Zweck hat die Verwendung von try...catch mit fetch()?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 4. Kapitel 5
some-alt