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

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

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.

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.