Recent Featured
Back

Fetch vs. Axios: Einfache API-Anfragen in Vue-Projekten

In der Welt der Webentwicklung sind API-Anfragen ein wesentlicher Bestandteil vieler Projekte. In Vue-Projekten stehen uns zwei beliebte Optionen zur Verfügung: Fetch und Axios. In diesem Artikel werden wir uns genauer mit diesen beiden Bibliotheken befassen, ihre Funktionen verstehen und die Unterschiede zwischen ihnen kennenlernen. Diese Erklärung soll dir helfen, die Materie leicht zu verstehen und dir bei der Wahl der richtigen Bibliothek für dein Vue-Projekt helfen.

Fetch: Eine native Browser-API

Fetch ist eine native Browser-API, die es ermöglicht, Ressourcen über das Netzwerk zu laden. Sie wurde eingeführt, um die Handhabung von HTTP-Anfragen zu vereinfachen. Fetch ist in den meisten modernen Browsern verfügbar und erfordert keine zusätzlichen Abhängigkeiten oder Installationen.

Fetch bietet eine einfache und klare API, um Daten von einem Server zu erhalten oder an den Server zu senden. Hier ist ein Beispiel, wie man Fetch verwendet, um eine GET-Anfrage an eine API zu senden:

fetch("https://api.example.com/data")    .then=>response.json())    .then=> {        console.log(data); // Hier kannst du die empfangenen Daten verwenden}).catch( error =>    console.error("Fehler:", error); // Fehlerbehandlung})

In diesem Beispiel senden wir eine GET-Anfrage an https://api.example.com/data und verwenden die response.json()-Methode, um die empfangenen Daten in ein JavaScript-Objekt umzuwandeln. Du kannst dann auf die Daten zugreifen und entsprechend handeln.

Fetch unterstützt auch andere Arten von Anfragen wie POST, PUT, DELETE usw. und ermöglicht die Konfiguration von Anfrageparametern wie Header, Authentifizierung und Caching.

Axios: Eine beliebte HTTP-Bibliothek

Axios ist eine JavaScript-Bibliothek, die speziell für die Durchführung von HTTP-Anfragen entwickelt wurde. Sie bietet eine einfache und intuitive API für den Umgang mit API-Anfragen und ist sehr beliebt in der Vue-Community.

Im Gegensatz zu Fetch ist Axios nicht in den Browsern eingebaut, daher muss es als externe Abhängigkeit in dein Projekt eingebunden werden. Du kannst Axios entweder über npm oder yarn installieren und dann in deinem Code verwenden.

Hier ist ein Beispiel, wie man Axios in einem Vue-Projekt verwendet, um eine GET-Anfrage an eine API zu senden:

import axios from "axios";axios.get("https://api.example.com/data")  .then((response) => {    // Hier kannst du die empfangenen Daten verwenden    console.log(response.data);  })  .catch((error) => {    // Fehlerbehandlung    console.error("Fehler:", error);  });

Axios bietet ähnliche Funktionen wie Fetch, aber mit einer etwas erweiterten API. Es unterstützt das Versenden von Anfrageparametern, das Festlegen von Anfrage-Header, das Abfangen von Anfragefehlern und vieles mehr. Axios bietet auch eine einfachere Art, Anfragen abzubrechen und Fortschrittsereignisse zu verfolgen.

  1. Einfachere Anfragen-Abbruchfunktion: Axios bietet eine integrierte Funktion zum Abbrechen von Anfragen, während Fetch dies nicht nativ unterstützt. Mit Axios kannst du eine Anfrage abbrechen, indem du ein Abbruchtoken verwendest, das von Axios generiert wird. Diese Funktion ermöglicht es dir, Anfragen effizient abzubrechen und Ressourcen freizugeben.
    Beispiel für das Abbrechen einer Anfrage in Axios:
const source = axios.CancelToken.source()

axios.get("https://api.example.com/data", {
    cancelToken: source.token,
  })
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    if (axios.isCancel(error)) {
      console.log("Anfrage abgebrochen:", error.message)
    } else {
      console.error("Fehler:", error)
    }
  });

// Anfrage abbrechen
source.cancel("Anfrage abgebrochen")
  1. Fortschrittsverfolgung: Axios bietet eine integrierte Möglichkeit, den Fortschritt einer Anfrage zu verfolgen. Dies ist nützlich, wenn du beispielsweise einen Fortschrittsbalken oder Ladeindikator anzeigen möchtest. Mit der onUploadProgress- und onDownloadProgress-Funktion von Axios kannst du den Fortschritt einer Upload- oder Download-Anfrage verfolgen und entsprechend reagieren.
    Beispiel für die Verfolgung des Fortschritts in Axios:
axios.post("https://api.example.com/upload", formData, {    onUploadProgress: (progressEvent) => {      const percentCompleted = Math.round(        (progressEvent.loaded * 100) / progressEvent.total      );      console.log("Upload-Fortschritt:", percentCompleted);    },  })  .then((response) => {    console.log(response.data);  })  .catch((error) => {    console.error("Fehler:", error);  });
  1. Vereinfachte Fehlerbehandlung: Axios bietet eine vereinfachte Fehlerbehandlung mit einem zentralen .catch()-Block, der auf alle fehlgeschlagenen Anfragen reagiert. Dies ermöglicht eine konsistente Behandlung von Fehlern und vereinfacht die Fehlerbehandlung in deinem Code.
    Beispiel für die Fehlerbehandlung in Axios:
axios.get("https://api.example.com/data")  .then((response) => {    console.log(response.data);  })  .catch((error) => {    console.error("Fehler:", error);  });

Diese erweiterten Funktionen von Axios machen es zu einer beliebten Wahl für die Arbeit mit API-Anfragen. Wenn du eine einfachere Art des Anfragen-Abbruchs, eine integrierte Fortschrittsverfolgung oder eine vereinfachte Fehlerbehandlung benötigst, bietet Axios eine erweiterte API im Vergleich zu Fetch.

  1. Interceptor-Unterstützung: Axios bietet die Möglichkeit, Interceptors zu verwenden, um Anfragen und Antworten global zu verändern oder zu erweitern. Mit Interceptors kannst du beispielsweise vor jeder Anfrage ein Authentifizierungstoken hinzufügen oder Fehler global behandeln. Diese Funktion erleichtert die Entwicklung von API-Anfragen und das Handling von Anfrage- und Antwortdaten auf globaler Ebene.
    Beispiel für die Verwendung von Interceptors in Axios:
// Vor jeder Anfrage ein Authentifizierungstoken hinzufügen
axios.interceptors.request.use( config => {
  config.headers.Authorization = 'Bearer your_token';
  return config;
});

// Vor jeder Antwort den Response global verändern
axios.interceptors.response.use( response => {
  response.data = response.data.results; // Beispielhafte Datenveränderung
  return response;
});
  1. Response-Transformation: Axios ermöglicht die Transformation von Antwortdaten mithilfe der transformResponse-Option. Du kannst Funktionen angeben, um die Antwortdaten vor ihrer Verwendung in deinem Code anzupassen oder zu verarbeiten. Dadurch kannst du die Daten beispielsweise in ein spezifisches Format bringen oder bestimmte Verarbeitungsschritte durchführen.
    Beispiel für die Transformation von Antwortdaten in Axios:
axios.get("https://api.example.com/data", {    transformResponse: [      function (data) {        // Daten vor der Verwendung transformieren        const transformedData = JSON.parse(data);        // Weitere Verarbeitungsschritte durchführen        transformedData.results = transformedData.results.slice(0, 5);        return transformedData;      },    ],  })  .then((response) => {    console.log(response.data);  })  .catch((error) => {    console.error("Fehler:", error);  });
  1. Cross-Site Request Forgery (CSRF)-Schutz: Axios bietet integrierten CSRF-Schutz, der bei der Kommunikation mit APIs wichtig sein kann, die CSRF-Schutz erfordern. Du kannst den CSRF-Schutz konfigurieren, indem du den CSRF-Token-Header hinzufügst, um Anfragen vor CSRF-Angriffen zu schützen.
    Beispiel für die Konfiguration des CSRF-Schutzes in Axios:
axios.defaults.headers.common["X-CSRF-TOKEN"] = "your_csrf_token";axios  .get("https://api.example.com/data")  .then((response) => {    console.log(response.data);  })  .catch((error) => {    console.error("Fehler:", error);  });

Die Unterschiede zwischen Fetch und Axios

Obwohl sowohl Fetch als auch Axios die grundlegende Aufgabe der API-Anfragen erfüllen, gibt es einige Unterschiede zwischen ihnen, die bei der Auswahl der geeigneten Bibliothek berücksichtigt werden sollten:

  1. Browser-Kompatibilität: Fetch ist in den meisten modernen Browsern eingebaut, während Axios eine externe Abhängigkeit ist, die in dein Projekt eingebunden werden muss. Wenn du eine breite Browser-Kompatibilität benötigst, könnte Fetch die beste Wahl sein.
  2. API-Komplexität: Axios bietet eine erweiterte API mit zusätzlichen Funktionen wie dem Abfangen von Anfragefehlern, dem Setzen von Anfrage-Header usw. Wenn du eine umfangreichere Kontrolle über deine Anfragen benötigst, könnte Axios die bessere Option sein.
  3. Code-Übersichtlichkeit: Fetch bietet eine einfache und klare API, die leicht zu verstehen ist. Axios hat ebenfalls eine intuitive API, aber möglicherweise mit etwas mehr Code und Konfiguration. Wenn dir Klarheit und Einfachheit wichtiger sind, könnte Fetch die bevorzugte Wahl sein.

Es ist wichtig zu beachten, dass die Wahl zwischen Fetch und Axios oft von den spezifischen Anforderungen deines Projekts und deinen persönlichen Vorlieben abhängt. Beide Bibliotheken sind leistungsstark und weit verbreitet, sodass du mit beiden gute Ergebnisse erzielen kannst.

Fazit: API-Anfragen sind ein wichtiger Aspekt in Vue-Projekten, und sowohl Fetch als auch Axios bieten Möglichkeiten, diese Aufgabe zu erledigen. Fetch ist eine native Browser-API mit einer einfachen API, während Axios eine externe Bibliothek ist, die eine erweiterte API und zusätzliche Funktionen bietet. Die Wahl zwischen Fetch und Axios hängt von Faktoren wie Browser-Kompatibilität, API-Komplexität und Code-Übersichtlichkeit ab. Am Ende liegt es an dir, die Bibliothek zu wählen, die am besten zu deinen Anforderungen passt.