Zusätzlich zur nativen fetch()-Funktion gibt es mehrere Drittanbieter-Bibliotheken, die für HTTP-Anfragen in JavaScript verfügbar sind. Eine der beliebtesten Bibliotheken ist Axios (Axios-Dokumentation). 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 anstelle von nativen fetch() verwenden?

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

• Automatische JSON-Parsing: Axios analysiert JSON-Antworten automatisch, während Sie bei fetch() manuell response.json() aufrufen müssen;
• Timeouts: Axios ermöglicht es Ihnen, Zeitlimits für Anfragen festzulegen, was von fetch() nicht nativ unterstützt wird;
• Anfrage- und Antwort-Interceptor: Axios bietet Interceptor, die es Ihnen ermöglichen, Funktionen auszuführen, bevor eine Anfrage gesendet oder nachdem eine Antwort empfangen wurde, was nützlich ist, um Authentifizierungstoken hinzuzufügen oder Anfragen zu protokollieren;
• Einfachere Syntax: Axios hat eine einfachere und konsistentere Syntax für Anfragen und das Handling von Antworten;
• Unterstützung für ältere Browser: Axios bietet integrierte Unterstützung für ä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 sowohl GET- als auch POST-Anfragen. Es gibt Promises zurück, genau wie fetch(), übernimmt jedoch einige der sich wiederholenden Aufgaben wie das automatische Parsen von JSON.

GET-Anfrage mit Axios

Dieses Beispiel demonstriert 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 es die JSON-Antwort automatisch analysiert und den Bedarf für einen separaten .json()-Aufruf eliminiert. Der try...catch-Block behandelt alle Fehler und zeigt entweder den Beitragstitel oder eine Fehlermeldung im HTML an.

POST-Anfrage mit Axios

Dieses Beispiel demonstriert 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), wirft Axios automatisch einen Fehler, der mit try...catch behandelt werden kann.

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

Zusätzliche Funktionen und Vorteile von Axios

Lassen Sie uns einige zusätzliche Funktionen von Axios erkunden.

Anforderungs- und Antwort-Interceptor

Axios ermöglicht es Ihnen, Anforderungen und Antworten abzufangen, um sie zu ändern, bevor sie verarbeitet werden. Dies ist nützlich, um Authentifizierungstoken hinzuzufügen, Anfragen zu protokollieren oder ein globales Fehlermanagement zu handhaben.

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 es Ihnen, Zeitlimits für Anfragen festzulegen, was sicherstellt, dass die Anfrage nicht unbegrenzt hängt.

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 ein Antwortstatus außerhalb des 2xx-Bereichs liegt, sodass Sie Ausfälle auf standardisierte Weise behandeln können.

Browser-Unterstützung

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