Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Integration Von Drittanbieter-Bibliotheken In JavaScript | Asynchrones JavaScript und API-Integration
Fortgeschrittene JavaScript-Beherrschung

bookIntegration Von Drittanbieter-Bibliotheken In JavaScript

Zusätzlich zur nativen fetch()-Funktion stehen in JavaScript mehrere Drittanbieter-Bibliotheken für HTTP-Anfragen zur Verfügung. Eine der beliebtesten Bibliotheken ist Axios ( Axios Docs). Diese Bibliotheken bieten zusätzliche Funktionen und Vorteile, die die Arbeit mit APIs vereinfachen und die Lesbarkeit des Codes verbessern können.

Warum Axios oder andere Bibliotheken statt der nativen fetch()-Funktion verwenden?

Obwohl die fetch()-API leistungsfähig ist, gibt es einige Einschränkungen, die durch Drittanbieter-Bibliotheken wie Axios behoben werden:

  • Automatische JSON-Analyse: Axios analysiert JSON-Antworten automatisch, während bei fetch() manuell response.json() aufgerufen werden muss;
  • Timeouts: Axios ermöglicht das Setzen von Timeouts für Anfragen, was von fetch() nicht nativ unterstützt wird;
  • Request- und Response-Interceptor: Axios stellt Interceptor bereit, mit denen Funktionen vor dem Senden einer Anfrage oder nach dem Empfang einer Antwort ausgeführt werden können, was beispielsweise für das Hinzufügen von Authentifizierungstoken oder das Protokollieren von Anfragen nützlich ist;
  • Einfachere Syntax: Axios bietet eine einfachere und konsistentere Syntax für das Senden von Anfragen und das Verarbeiten von Antworten;
  • Unterstützung älterer Browser: Axios unterstützt ältere Browser, die die native fetch()-API möglicherweise nicht vollständig unterstützen.

Grundlegende Verwendung von Axios

Axios bietet eine einfache Syntax für GET- und POST-Anfragen. Es gibt, wie fetch(), Promises zurück, übernimmt jedoch einige wiederkehrende Aufgaben wie die automatische JSON-Analyse.

GET-Anfrage mit Axios

index.html

index.html

index.js

index.js

copy

Dieses Beispiel zeigt die Verwendung von Axios für eine GET-Anfrage. Die Funktion getPostWithAxios ruft axios.get() auf, um Daten von einem API-Endpunkt (/posts/1) abzurufen. Axios vereinfacht den Prozess, indem die JSON-Antwort automatisch geparst wird, sodass kein separater Aufruf von .json() erforderlich ist. Der try...catch-Block behandelt alle Fehler und zeigt entweder den Titel des Beitrags oder eine Fehlermeldung im HTML an.

POST-Anfrage mit Axios

index.html

index.html

index.js

index.js

copy

Dieses Beispiel zeigt eine POST-Anfrage mit Axios, um Daten an eine API zu senden. Die Funktion sendPostWithAxios ruft axios.post() mit dem API-Endpunkt (/posts) und den Daten für einen neuen Beitrag auf, einschließlich title, body und userId. Axios sendet die Daten automatisch als JSON, was den Prozess vereinfacht. Der try...catch-Block behandelt alle Fehler und zeigt entweder den Titel des erstellten Beitrags oder eine Fehlermeldung im HTML an.

Fehlerbehandlung mit Axios

Axios bietet einen einfach zu verwendenden Mechanismus zur Fehlerbehandlung. Wenn die Anfrage fehlschlägt (z. B. Netzwerkproblem oder Serverfehler), löst Axios automatisch einen Fehler aus, der mit try...catch behandelt werden kann.

index.html

index.html

index.js

index.js

copy

Dieses Beispiel veranschaulicht die Fehlerbehandlung mit Axios. Die Funktion getInvalidPost versucht, Daten von einem nicht existierenden Endpunkt mit axios.get() abzurufen. Wenn die Anfrage fehlschlägt, löst Axios automatisch einen Fehler aus. Der try...catch-Block fängt diesen Fehler ab und zeigt die Fehlermeldung im HTML an.

Zusätzliche Funktionen und Vorteile von Axios

Überblick über weitere Funktionen von Axios.

Request- und Response-Interceptor

Axios ermöglicht das Abfangen von Anfragen und Antworten, um diese vor der Verarbeitung zu modifizieren. Dies ist nützlich, um Authentifizierungstoken hinzuzufügen, Anfragen zu protokollieren oder ein globales Fehlermanagement zu implementieren.

axios.interceptors.request.use(
  config => {
    // Modify request config (e.g., add authentication token)
    config.headers.Authorization = 'Bearer token';
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

Timeout-Unterstützung

Axios ermöglicht das Festlegen von Timeouts für Anfragen, wodurch sichergestellt wird, dass die Anfrage nicht unbegrenzt hängen bleibt.

axios
  .get('https://jsonplaceholder.typicode.com/posts/1', { timeout: 5000 })
  .then(response => console.log(response.data))
  .catch(error => console.error('Request timed out', error));

Vereinfachte Fehlerbehandlung

Axios wirft automatisch Fehler, wenn der Antwortstatus außerhalb des 2xx-Bereichs liegt, sodass Fehler auf standardisierte Weise behandelt werden können.

Browserunterstützung

Axios funktioniert in allen modernen Browsern und stellt Polyfills für ältere Browser bereit, was es zu einer vielseitigeren Option für bestimmte Projekte macht.

1. Was macht Axios automatisch beim Umgang mit JSON-Antworten?

2. Welche Methode wird verwendet, um mit Axios eine POST-Anfrage zu senden?

question mark

Was macht Axios automatisch beim Umgang mit JSON-Antworten?

Select the correct answer

question mark

Welche Methode wird verwendet, um mit Axios eine POST-Anfrage zu senden?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 4. Kapitel 8

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 show me a basic example of using Axios for a GET request?

How do I handle errors with Axios in my code?

What are some advanced features of Axios I should know about?

Awesome!

Completion rate improved to 2.22

bookIntegration Von Drittanbieter-Bibliotheken In JavaScript

Swipe um das Menü anzuzeigen

Zusätzlich zur nativen fetch()-Funktion stehen in JavaScript mehrere Drittanbieter-Bibliotheken für HTTP-Anfragen zur Verfügung. Eine der beliebtesten Bibliotheken ist Axios ( Axios Docs). Diese Bibliotheken bieten zusätzliche Funktionen und Vorteile, die die Arbeit mit APIs vereinfachen und die Lesbarkeit des Codes verbessern können.

Warum Axios oder andere Bibliotheken statt der nativen fetch()-Funktion verwenden?

Obwohl die fetch()-API leistungsfähig ist, gibt es einige Einschränkungen, die durch Drittanbieter-Bibliotheken wie Axios behoben werden:

  • Automatische JSON-Analyse: Axios analysiert JSON-Antworten automatisch, während bei fetch() manuell response.json() aufgerufen werden muss;
  • Timeouts: Axios ermöglicht das Setzen von Timeouts für Anfragen, was von fetch() nicht nativ unterstützt wird;
  • Request- und Response-Interceptor: Axios stellt Interceptor bereit, mit denen Funktionen vor dem Senden einer Anfrage oder nach dem Empfang einer Antwort ausgeführt werden können, was beispielsweise für das Hinzufügen von Authentifizierungstoken oder das Protokollieren von Anfragen nützlich ist;
  • Einfachere Syntax: Axios bietet eine einfachere und konsistentere Syntax für das Senden von Anfragen und das Verarbeiten von Antworten;
  • Unterstützung älterer Browser: Axios unterstützt ältere Browser, die die native fetch()-API möglicherweise nicht vollständig unterstützen.

Grundlegende Verwendung von Axios

Axios bietet eine einfache Syntax für GET- und POST-Anfragen. Es gibt, wie fetch(), Promises zurück, übernimmt jedoch einige wiederkehrende Aufgaben wie die automatische JSON-Analyse.

GET-Anfrage mit Axios

index.html

index.html

index.js

index.js

copy

Dieses Beispiel zeigt die Verwendung von Axios für eine GET-Anfrage. Die Funktion getPostWithAxios ruft axios.get() auf, um Daten von einem API-Endpunkt (/posts/1) abzurufen. Axios vereinfacht den Prozess, indem die JSON-Antwort automatisch geparst wird, sodass kein separater Aufruf von .json() erforderlich ist. Der try...catch-Block behandelt alle Fehler und zeigt entweder den Titel des Beitrags oder eine Fehlermeldung im HTML an.

POST-Anfrage mit Axios

index.html

index.html

index.js

index.js

copy

Dieses Beispiel zeigt eine POST-Anfrage mit Axios, um Daten an eine API zu senden. Die Funktion sendPostWithAxios ruft axios.post() mit dem API-Endpunkt (/posts) und den Daten für einen neuen Beitrag auf, einschließlich title, body und userId. Axios sendet die Daten automatisch als JSON, was den Prozess vereinfacht. Der try...catch-Block behandelt alle Fehler und zeigt entweder den Titel des erstellten Beitrags oder eine Fehlermeldung im HTML an.

Fehlerbehandlung mit Axios

Axios bietet einen einfach zu verwendenden Mechanismus zur Fehlerbehandlung. Wenn die Anfrage fehlschlägt (z. B. Netzwerkproblem oder Serverfehler), löst Axios automatisch einen Fehler aus, der mit try...catch behandelt werden kann.

index.html

index.html

index.js

index.js

copy

Dieses Beispiel veranschaulicht die Fehlerbehandlung mit Axios. Die Funktion getInvalidPost versucht, Daten von einem nicht existierenden Endpunkt mit axios.get() abzurufen. Wenn die Anfrage fehlschlägt, löst Axios automatisch einen Fehler aus. Der try...catch-Block fängt diesen Fehler ab und zeigt die Fehlermeldung im HTML an.

Zusätzliche Funktionen und Vorteile von Axios

Überblick über weitere Funktionen von Axios.

Request- und Response-Interceptor

Axios ermöglicht das Abfangen von Anfragen und Antworten, um diese vor der Verarbeitung zu modifizieren. Dies ist nützlich, um Authentifizierungstoken hinzuzufügen, Anfragen zu protokollieren oder ein globales Fehlermanagement zu implementieren.

axios.interceptors.request.use(
  config => {
    // Modify request config (e.g., add authentication token)
    config.headers.Authorization = 'Bearer token';
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

Timeout-Unterstützung

Axios ermöglicht das Festlegen von Timeouts für Anfragen, wodurch sichergestellt wird, dass die Anfrage nicht unbegrenzt hängen bleibt.

axios
  .get('https://jsonplaceholder.typicode.com/posts/1', { timeout: 5000 })
  .then(response => console.log(response.data))
  .catch(error => console.error('Request timed out', error));

Vereinfachte Fehlerbehandlung

Axios wirft automatisch Fehler, wenn der Antwortstatus außerhalb des 2xx-Bereichs liegt, sodass Fehler auf standardisierte Weise behandelt werden können.

Browserunterstützung

Axios funktioniert in allen modernen Browsern und stellt Polyfills für ältere Browser bereit, was es zu einer vielseitigeren Option für bestimmte Projekte macht.

1. Was macht Axios automatisch beim Umgang mit JSON-Antworten?

2. Welche Methode wird verwendet, um mit Axios eine POST-Anfrage zu senden?

question mark

Was macht Axios automatisch beim Umgang mit JSON-Antworten?

Select the correct answer

question mark

Welche Methode wird verwendet, um mit Axios eine POST-Anfrage zu senden?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 4. Kapitel 8
some-alt