Axios vs. fetch() zum Stellen von HTTP-Anfragen

Zur Übertragung von Informationen und Dokumenten werden das HyperText Transfer Protocol (HTTP) und seine sicherere Variante HTTPS verwendet. Es definiert, wie Nachrichten formatiert und übertragen werden und welche Aktionen Webserver und Browser als Reaktion auf verschiedene Befehle ausführen sollen. HTTP-Anfragen sind für die Webentwicklung unerlässlich, sei es bei der Interaktion mit Servern oder der Arbeit mit APIs. Das Verständnis von HTTP-Anfragen ist für die Arbeit mit jeder Webtechnologie von entscheidender Bedeutung.

In JavaScript sowie in NodeJS (einer JavaScript-Laufzeitumgebung) gibt es zwei beliebte Bibliotheken für die Arbeit mit HTTP-Anfragen: Fetch API und Axios. Die Wahl zwischen ihnen ist umstritten, wobei jede ihre eigenen Unterstützer hat. In diesem Artikel vergleichen wir diese beiden Methoden, um ihre Vor- und Nachteile zu ermitteln und Ihnen bei der Auswahl der für Ihr Projekt am besten geeigneten Methode zu helfen.

HTTP-Anfragen verstehen

Bevor wir uns mit Fetch API und Axios befassen, wollen wir uns kurz mit HTTP-Anfragen befassen: was sie sind, welche Typen und welche Komponenten sie haben. Eine HTTP-Anfrage ist eine an einen Server gesendete Nachricht, um auf eine Ressource zuzugreifen. Die Anfrage gibt die Methode, die URL, die Header und den Text (falls vorhanden) an. Es gibt viele HTTP-Anfragemethoden:

1. ERHALTEN: fetch() Daten von einer angegebenen Ressource anfordern. Es sollte keine Auswirkungen auf die Daten haben.
2. POST: Sendet zu verarbeitende Daten an eine angegebene Ressource, was häufig zu einer Statusänderung oder Nebenwirkungen auf dem Server führt.
3. SETZEN: Ersetzt alle aktuellen Darstellungen der Zielressource durch den hochgeladenen Inhalt.
4. LÖSCHEN: Entfernt angegebene Ressourcen.
5. KOPF: Ähnlich wie GET, fordert jedoch nur die Header an (nicht den Hauptteil der angegebenen Ressource).
6. PATCH: Wendet teilweise Änderungen auf eine Ressource an.

Nachdem Sie die Anforderungsmethode definiert haben, geben Sie die Ressourcen-URL an. Als Nächstes erstellen Sie die eigentliche Anfrage, bestehend aus Headern und einem Text.

Anforderungsheader stellen dem Server wichtige Informationen zur Verfügung, z. B. akzeptable Inhaltstypen (Accept-Header), gesendete Inhaltstypen (Content-Type-Header) und Authentifizierungsdaten. Der Anfragetext wird zum Senden von Daten bei bestimmten Anfragen wie POST oder PUT verwendet. Es kann sich um ein Formular, JSON, XML oder jedes andere Format handeln, das der Server erwartet.

HTTP-Antworten bestehen aus einer Statuszeile (einschließlich des HTTP-Statuscodes und einer kurzen Beschreibung), Headern und manchmal einem Text. Der Statuscode gibt Auskunft über das Ergebnis der Anfrage. Zu den gängigen Statuscodes gehören:

1. 200 OK: Die Anfrage war erfolgreich.
2. 301 Dauerhaft verschoben: Die Ressource wurde dauerhaft auf eine neue URL verschoben.
3. 400 Ungültige Anfrage: Die Anfrage kann aufgrund fehlerhafter Syntax nicht verarbeitet werden.
4. 401 nicht Autorisiert: Für den Zugriff auf die Ressource ist eine Authentifizierung erforderlich.
5. 404 Nicht gefunden: Die angeforderte Ressource konnte nicht gefunden werden.
6. 500 Interner Serverfehler: Eine allgemeine Fehlermeldung, wenn der Server auf einen unerwarteten Zustand stößt.

Es empfiehlt sich, bei HTTP-Anfragen nicht nur die Möglichkeit einer erfolgreichen Antwort, sondern auch potenzielle Fehler zu berücksichtigen.

Nachdem wir nun ein Verständnis für HTTP-Anfragen, ihre Typen, Komponenten und erwarteten Antworten haben, gehen wir zum Hauptthema dieses Artikels über und vergleichen zwei beliebte NodeJS-Tools für die Arbeit mit ihnen.

Ein kurzer Überblick über Fetch und Axios

Um diese Tools effektiv vergleichen zu können, sollten wir zunächst ihre Definitionen und Zwecke verstehen. Indem wir die Kernunterschiede zwischen Fetch API und Axios verstehen, können wir ihre jeweiligen Stärken und Schwächen für verschiedene Anwendungsfälle besser bewerten.

Was ist die Fetch-API?

Die Fetch-API ist eine native JavaScript-Schnittstelle zum Senden von HTTP-Anfragen. Es ist Teil der Window- und Worker-APIs und bietet eine globale fetch() Methode zum Senden von Anfragen. Diese API wurde entwickelt, um das Vorgängermodell zu ersetzen XMLHttpRequest Ansatz, der ein einfacheres und leistungsfähigeres Tool für die Arbeit mit Netzwerkanfragen bietet.

Eine einfache GET-Anfrage mit dem fetch():

fetch('https://example.com')
  .then(response => {
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('There was a problem with your fetch operation:', error));

Die Fetch-API ist keine integrierte Funktion in Node.js, da Node.js keine native API für die Arbeit mit HTML- oder HTTP-Anfragen hat, wie dies beim Browser der Fall ist. Mithilfe externer Module wie Node-Fetch können Sie jedoch das Verhalten von emulieren fetch() in einer Node.js-Umgebung. Sobald Node-Fetch installiert ist, verwenden Sie fetch() in Node.js sieht der Verwendung im Browser sehr ähnlich.

const fetch = require('node-fetch');

fetch('https://example.com')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Der Rest dieses Artikels enthält Beispiele speziell im Kontext von JavaScript.

Was ist Axios?

Axios ist eine beliebte JavaScript-Bibliothek zum Senden von HTTP-Anfragen sowohl von Browsern als auch von Node.js. Es bietet eine praktische API zum Senden von Anfragen an Server und zum Verarbeiten von Antworten. Im Vergleich zu den fetch()Axios fügt mehrere nützliche Funktionen hinzu und vereinfacht einige Aspekte der Anforderungsstellung, wie z. B. das automatische Parsen von JSON-Antworten und den XSRF-Schutz.

Es wird häufig in Verbindung mit der Cheerio-Bibliothek zum Web-Scraping verwendet. Cheerio ist eine schnelle, flexible und schlanke Implementierung des jQuery-Kerns, die speziell für den Server entwickelt wurde. Es ermöglicht Ihnen, Daten aus HTML-Dokumenten auszuwählen und zu extrahieren.

Bevor wir uns einem detaillierten Funktionsvergleich widmen, wollen wir uns mit der Verwendung von Axios sowohl in der Browser- als auch in der Node.js-Umgebung befassen. Die Verwendung ist in beiden Fällen sehr ähnlich, mit geringfügigen Unterschieden aufgrund der Ausführungsumgebung.

Um Axios im Browser zu verwenden, fügen Sie Ihrer HTML-Datei ein Skript-Tag aus dem CDN hinzu. Anschließend können Sie das Axios-Objekt verwenden, um eine GET-Anfrage zu stellen.

axios.get('https://example.com')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  })
  .finally(function () {
  });

Um Axios in Node.js verwenden zu können, müssen Sie zunächst das Paket mit installieren npm oder yarn. Ansonsten gibt es nicht viele Unterschiede:

const axios = require('axios');

axios.get('https://example.com')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  })
  .finally(function () {
  });

Axios ist sowohl im Browser als auch in NodeJS einfach zu verwenden, mit minimalen bis keinen Codeunterschieden.

Hauptunterschiede und Überlegungen

Nachdem wir nun behandelt haben, was Axios und Fetch API sind, wollen wir sie anhand verschiedener Kriterien im Detail vergleichen. Dies wird uns helfen, ihre Stärken und Schwächen zu identifizieren. Doch bevor wir das tun, präsentieren wir eine kurze Tabelle mit ihren Hauptaspekten:

Wie Sie sehen, hat jeder von ihnen sowohl Vor- als auch Nachteile, was die Wahl des richtigen Werkzeugs etwas schwierig machen kann. Um das beste Tool zu ermitteln, schauen wir uns die einzelnen Tools genauer an und stellen relevante Codebeispiele für verschiedene Situationen bereit.

Syntax- und Antwortobjekt

Die Fetch-API ist eine native JavaScript-Funktion, die externe Bibliotheken überflüssig macht und daher eine praktische Wahl darstellt. Während wir GET-Anfragen behandelt haben, wird eine POST-Anfrage die Unterschiede zwischen Fetch API und Axios besser veranschaulichen. So würde eine POST-Anfrage mit aussehen fetch():

fetch('https://example.com', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    key1: 'value1',
    key2: 'value2',
  }),
})
  .then(response => {
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('There was a problem with your fetch operation:', error));

Andererseits ist Axios eine externe Bibliothek, die eine präzisere und bequemere Syntax bietet. Daher sieht die gleiche Anfrage, die es verwendet, viel einfacher und kürzer aus:

axios.post('https://example.com', {
    key1: 'value1',
    key2: 'value2',
  })
  .then(response => console.log(response.data))
  .catch(error => console.error('There was a problem with your axios operation:', error));

Wie die Beispiele zeigen, kann Axios dazu beitragen, die Codemenge zu reduzieren und die Lesbarkeit zu verbessern. Daher bevorzugen viele Entwickler es aufgrund seiner Lesbarkeit und Benutzerfreundlichkeit.

Leistungsüberlegungen

Der Leistungsvergleich von Axios und der Fetch-API hängt von spezifischen Anwendungsfällen und Projektanforderungen ab. Allgemein, fetch() bietet Vorteile im Hinblick auf ein leichtes Design und die Integration mit nativen Browserfunktionen, während Axios zusätzliche Annehmlichkeiten bietet, die in bestimmten Szenarien von Vorteil sein können.

Axios verursacht aufgrund seiner zusätzlichen Funktionalität einen gewissen Overhead, wodurch es im Vergleich zu schwerer ist fetch(). Darüber hinaus können den Abfangjägern zusätzliche Kosten bei der Verarbeitung von Anfragen und Antworten entstehen, insbesondere wenn eine große Anzahl von Abfangjägern eingesetzt wird. Allerdings bietet Axios eine Anforderungs-Caching-Funktionalität, die die Leistung in Szenarien mit sich wiederholenden Anforderungen verbessern kann.

Andererseits ist die Fetch-API schlanker und nativ in Browser integriert, wodurch die Menge des heruntergeladenen Codes reduziert wird. Darüber hinaus verwendet es Versprechen, um eine saubere und praktische Syntax sowie eine gute Leistung in asynchronen Szenarien zu gewährleisten. Darüber hinaus ist die Fetch-API standardmäßig in native Browserfunktionen wie Service Workers integriert, was für die Leistung moderner Webanwendungen von entscheidender Bedeutung sein kann.

Wenn Sie daher eine einfache HTTP-Anfrage ohne zusätzliche Funktionen ausführen müssen, fetch() kann aufgrund seines geringen Gewichts die bevorzugte Option sein. Wenn jedoch zusätzliche Funktionen wie Interceptors und Caching erforderlich sind oder Sie HTTP-Anfragen in Node.js stellen müssen, wo fetch() nicht zur Standardbibliothek gehört, dann wäre Axios die bessere Wahl.

Antwortzeitüberschreitung

Leider bietet die Fetch-API keine direkte Möglichkeit, ein Timeout festzulegen. Sie können jedoch die verwenden AbortController Und AbortSignal Mechanismen zum manuellen Abbrechen einer Anfrage nach Ablauf einer bestimmten Zeit.

const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000);

fetch('https://example.com/', { signal: controller.signal })
  .then(function (response) {
    clearTimeout(timeoutId);
    return response.json();
  })
  .then(function (data) {
    console.log(data);
  })
  .catch(function (error) {
    if (error.name === 'AbortError') {
      console.log('Request canceled due to timeout');
    } else {
      console.log(error);
    }
  });

Mit Axios können Sie mithilfe der Timeout-Option in der Anforderungskonfiguration ein Timeout für Anfragen festlegen. Diese Option gibt die maximale Zeit (in Millisekunden) an, die eine Anfrage zum Abschluss benötigen sollte. Bei Überschreitung des Timeouts wird die Anfrage abgebrochen und das Versprechen abgelehnt.

axios.get('https://example.com', { timeout: 5000 })
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    if (axios.isCancel(error)) {
      console.log('Request canceled due to timeout');
    } else {
      console.log(error);
    }
  });

Beide Lösungen bieten ähnliche Funktionen, Axios bietet jedoch eine einfachere und bequemere Möglichkeit, Anforderungs-Timeouts zu verwalten.

Fehlerbehandlung

Die Fetch-API betrachtet alle anderen HTTP-Statuscodes als 200 (Erfolg) als Fehler. Dies geschieht jedoch nicht automatisch und Sie müssen den Status Ihres Codes überprüfen, um Fehler manuell zu beheben. Zusätzlich, fetch() Behandelt keine Netzwerkfehler (z. B. keine Internetverbindung oder Unfähigkeit, eine Verbindung herzustellen). Um solche Fehler zu behandeln, müssen Sie Try-Catch verwenden fetch() Anruf.

try {
    const response = await fetch('https://example.com');
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Fetch error:', error);
  }

Axios verarbeitet HTTP-Status automatisch und löst den Catch-Block für alle Antworten mit fehlerhaften HTTP-Status aus (außer 2xx). Dies vereinfacht die Fehlerbehandlung und ermöglicht es Ihnen, sich auf Ihren Code zu konzentrieren. Darüber hinaus bewältigt Axios problemlos Netzwerkfehler, etwa wenn keine Verbindung besteht oder keine Verbindung hergestellt werden kann.

axios.get('https://example.com')
  .then(response => console.log(response.data))
  .catch(error => {
    if (error.response) {
      console.error('Axios error! HTTP status:', error.response.status);
    } else if (error.request) {
      console.error('Axios error! Network issue:', error.message);
    } else {
      console.error('Axios error!', error.message);
    }
  });

Axios bietet einen bequemeren und gezielteren Fehlerbehandlungsmechanismus, insbesondere im Zusammenhang mit HTTP-Status. Im Gegensatz dazu ist die fetch() erfordert einen höheren manuellen Aufwand, insbesondere bei Netzwerkfehlern.

Upload-Fortschritt

Die Überwachung des Datei-Upload-Fortschritts ist mit Axios einfacher und unkomplizierter als mit fetch(). Axios stellt den Parameter onUploadProgress bereit, der automatisch ausgelöst wird, wenn der Upload-Fortschritt aktualisiert wird. Dies vereinfacht die Fortschrittsüberwachung und Integration in Ihren Code, um Upload-Informationen anzuzeigen.

const axios = require('axios');
const fs = require('fs');
const FormData = require('form-data');

const fileStream = fs.createReadStream('file.txt');
const formData = new FormData();
formData.append('file', fileStream);

axios.post('https://example.com/', formData, {
  headers: formData.getHeaders(),
  onUploadProgress: progressEvent => {
    console.log(`Uploaded ${progressEvent.loaded} bytes`);
  }
})
.then(response => {
  console.log('Upload successful');
})
.catch(error => {
  console.error('Upload failed:', error);
});

Das Verfolgen des Download-Fortschritts mit der Fetch-API ist komplexer und erfordert eine tiefere Integration in den Antwortdatenstrom. Eine manuelle Extraktion der Fortschrittsinformationen aus dem Stream und deren Verarbeitung im entsprechenden Handler ist erforderlich.

const file = document.querySelector('input(type="file")').files(0);
const formData = new FormData();
formData.append('file', file);

fetch('https://example.com/', {
  method: 'POST',
  body: formData
}).then(response => {
  const reader = response.body.getReader();
  const contentLength = +response.headers.get('Content-Length');

  let loaded = 0;
  reader.read().then(function processResult(result) {
    if (result.done) {
      console.log('Upload completed');
      return;
    }

    loaded += result.value.length;
    console.log(`Uploaded ${loaded} of ${contentLength} bytes`);

    return reader.read().then(processResult);
  });
}).catch(error => {
  console.error('Upload failed:', error);
});

Wenn Ihre Anwendung also stark auf das Hochladen von Dateien angewiesen ist, kann Axios diese Funktionalität erheblich vereinfachen.

Rückwärtskompatibilität

Die Fetch-API wird von den meisten modernen Browsern unterstützt, jedoch nicht vom Internet Explorer und älteren Versionen anderer Browser. Polyfills sind erforderlich, um die Abwärtskompatibilität mit veralteten Browsern sicherzustellen.

Axios bietet eine bessere Abwärtskompatibilität, da es ohne zusätzliche Polyfills in Browsern und Node.js verwendet werden kann. Dies macht es zu einer bevorzugten Wahl für Projekte, die Unterstützung für ältere Browser oder Umgebungen erfordern.

Automatische JSON-Datentransformation

Die Fetch-API analysiert JSON-Antworten nicht automatisch. Um die Daten im JSON-Datenformat abzurufen, müssen Sie die aufrufen .json() Methode für das Antwortobjekt.

fetch('https://example.com/')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Axios bietet automatische JSON-Datenanalyse. Die Antwortdaten werden automatisch aus dem Axios-Antwortobjekt extrahiert und sind über die Eigenschaft .data zugänglich.

axios.get('https://example.com/')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

Es ist jedoch zu beachten, dass Axios versucht, die Antwort automatisch in JSON zu konvertieren, auch wenn der Server Daten in einem anderen Format zurückgibt. Wenn der Server Daten in einem Format zurückgibt, das nicht in JSON konvertiert werden kann (z. B. einfacher Text, HTML oder XML), generiert Axios einen Fehler. Wenn Sie das Antwortformat jedoch im Voraus kennen und es manuell verarbeiten möchten, können Sie andere Axios-Methoden verwenden, z .text() oder .arrayBuffer()um die Daten im gewünschten Format zu erhalten.

HTTP-Interceptors

HTTP-Interceptoren sind im Kontext von HTTP-Anfragen ein Mechanismus, der es Ihnen ermöglicht, Anfragen und Antworten abzufangen und zu verarbeiten, bevor sie gesendet oder nachdem sie empfangen werden. Es ist ein leistungsstarkes Werkzeug für:

1. Gemeinsame Logik hinzufügen: Sie können allen HTTP-Anfragen eine gemeinsame Logik hinzufügen, z. B. Authentifizierung, Autorisierung oder Protokollierung.
2. Fehlerbehandlung: Sie können Fehler zentral behandeln und für ein konsistentes Benutzererlebnis sorgen.
3. Datenmanipulation: Sie können die Anfrage- oder Antwortdaten bearbeiten, bevor sie gesendet oder empfangen werden.
4. Andere Operationen: Sie können andere Vorgänge wie Caching oder Protokollierung für HTTP-Anfragen und -Antworten ausführen.

Die Fetch-API im Browser stellt ein Request-Objekt bereit, mit dem eine Anfrage erstellt werden kann. Allerdings ist die fetch() bietet keinen integrierten Mechanismus zum Abfangen von HTTP-Anfragen. Das bedeutet, dass Sie Request- und Response-Objekte in Ihrem Code explizit verarbeiten müssen, um Anfragen und Antworten zu manipulieren.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Axios bietet einen integrierten HTTP-Interceptor-Mechanismus. Sie können Interceptoren sowohl für Anfragen als auch für Antworten hinzufügen. Dies erleichtert das Hinzufügen gemeinsamer Logik oder Datentransformation für alle Anforderungen.

const axios = require('axios');

axios.interceptors.request.use(config => {
  console.log('Request Interceptor:', config);
  return config;
}, error => {
  return Promise.reject(error);
});

axios.interceptors.response.use(response => {
  console.log('Response Interceptor:', response);
  return response;
}, error => {
  return Promise.reject(error);
});

axios.get('https://example.com/')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

Axios vereinfacht das Hinzufügen gemeinsamer Logik zu allen Anfragen. Dadurch entfällt die Notwendigkeit, Anfragen und Antworten explizit zu verarbeiten, was es zu einer guten Wahl für diejenigen macht, die den Einsatz vollwertiger Abfangjäger bevorzugen.

Laden Sie den Fortschritt herunter

Fetch API und Axios bieten unterschiedliche Ansätze zur Verfolgung des Download-Fortschritts. fetch() stellt ein Response-Objekt mit einem bereit body.getReader() Methode. Diese Methode gibt a zurück ReadableStream Objekt, mit dem Daten in Blöcken gelesen werden können, sodass Sie den Fortschritt verfolgen können.

fetch('https://example.com/')
  .then(response => {
    const contentLength = response.headers.get('Content-Length');
    const total = parseInt(contentLength, 10);
    let loaded = 0;
    const reader = response.body.getReader();

    function read() {
      return reader.read().then(({ done, value }) => {
        if (done) {
          console.log('Download complete');
          return;
        }
        loaded += value.byteLength;
        console.log(`Progress: ${(loaded / total) * 100}%`);
        return read();
      });
    }

    return read();
  })
  .catch(error => console.error('Download error:', error));

Axios hingegen bietet eine onDownloadProgress Callback-Funktion, mit der der Download-Fortschritt verfolgt werden kann. Diese Funktion wird regelmäßig mit Informationen über die Gesamtzahl der heruntergeladenen Bytes und die Gesamtzahl der voraussichtlich herunterzuladenden Bytes aufgerufen.

const axios = require('axios');
const url="https://example.com/";

axios({
  method: 'get',
  url: url,
  responseType: 'stream',
  onDownloadProgress: progressEvent => {
    const total = progressEvent.lengthComputable ? progressEvent.total : -1;
    const loaded = progressEvent.loaded;
    if (total !== -1) {
      console.log(`Progress: ${(loaded / total) * 100}%`);
    }
  },
})
  .then(response => {
    console.log('Download complete');
  })
  .catch(error => console.error('Download error:', error));

Welchen Ansatz Sie verwenden, hängt von Ihren spezifischen Bedürfnissen ab. Wenn Sie den Fortschritt des Downloads sehr genau verfolgen müssen, sollten Sie das verwenden body.getReader() Methode. Wenn Sie jedoch nur einen allgemeinen Hinweis auf den Fortschritt benötigen, dann ist dies der Fall onDownloadProgress Die Rückruffunktion ist eine einfachere Option.

Gleichzeitige Anfragen

Sowohl Fetch API als auch Axios unterstützen gleichzeitige Anfragen, es gibt jedoch einige Unterschiede in ihrer Verwendung und ihren Funktionen. Die Fetch-API bietet einen grundlegenden Mechanismus zum Ausführen gleichzeitiger Anforderungen promise.all.

const urls = ('https://example.com/data1', 'https://example.com/data2');

const requests = urls.map(url => fetch(url));

Promise.all(requests)
  .then(responses => Promise.all(responses.map(response => response.json())))
  .then(data => console.log(data))
  .catch(error => console.error(error));

Axios bietet die axios.all Methode zum gleichzeitigen Stellen von Anfragen und axios.spread zum Verteilen von Daten auf Antworten:

const axios = require('axios');

const urls = ('https://api.example.com/data1', 'https://api.example.com/data2');

const requests = urls.map(url => axios.get(url));

axios.all(requests)
  .then(axios.spread((...responses) => {
    const data = responses.map(response => response.data);
    console.log(data);
  }))
  .catch(error => console.error(error));

Wenn gleichzeitige Anforderungen für Sie ein wichtiger Aspekt sind und Sie eine bequemere Syntax benötigen, ist Axios möglicherweise die bessere Wahl.

Umgang mit CORS

Die Fetch-API ist ein Standardbestandteil von Browser-JavaScript, was zwar praktisch ist, aber eine explizitere Verwaltung von CORS-Anfragen (Cross-Origin Resource Sharing) erfordert. Andererseits bietet Axios komfortablere Tools für die Arbeit mit CORS, die automatisch Header verarbeiten und Optionen für zusätzliche Konfigurationen bereitstellen.

Community-Unterstützung und Popularität

Der fetch() ist ein in moderne Browser integrierter Standard, daher werden Support und Fragen normalerweise innerhalb der Webentwicklungs-Community besprochen. Darüber hinaus ist die Fetch-API-Dokumentation umfangreich und wird vom Mozilla Developer Network (MDN) bereitgestellt, was sie zu einer zuverlässigen Informationsquelle macht. Einige Probleme und Schwachstellen, auf die Benutzer gestoßen sind, wurden jedoch entweder lange Zeit ignoriert oder nicht behoben.

Andererseits verfügt Axios über ein aktives und ständig aktualisiertes Repository auf Github sowie eine große Community von Benutzern und Entwicklern. Auf Plattformen wie Stack Overflow gibt es viele Diskussionen und Fragen. Dadurch werden entdeckte Probleme und Schwachstellen deutlich schneller behoben.

Auswahl zwischen Fetch und Axios

Nachdem wir uns nun die verschiedenen Optionen und Funktionen von Axios und der Fetch-API angesehen haben, können wir diskutieren, welches Tool für welche Fälle besser geeignet ist. Es ist jedoch anzumerken, dass es keine allgemeingültige Antwort auf die Frage gibt, welches Tool besser ist, da dies von vielen Faktoren abhängt, darunter den Zielen des Projekts und den Fähigkeiten des Programmierers.

Wann sollte Fetch verwendet werden?

Die Fetch-API bietet eine bequeme und einfache Möglichkeit, HTTP-Anfragen in modernen Browsern auszuführen. Seine Einfachheit und die Verwendung von Versprechen machen es zur bevorzugten Wahl für einfache Anfragen. Allerdings können einige Einschränkungen, wie mangelnde Unterstützung in älteren Browsern und einige Mängel bei der Fehlerbehandlung, in komplexeren Szenarien die Verwendung zusätzlicher Problemumgehungen oder alternativer Bibliotheken erfordern.

Wenn jedoch die Einschränkungen der fetch() Für Ihren Anwendungsfall kein Problem darstellen oder Sie sie umgehen können, ist es vorzuziehen, sie zu verwenden, da sie zuverlässiger ist, bereits in Browser integriert ist und weniger Auswirkungen auf die Leistung hat.

Wann Sie Axios verwenden sollten

Wenn Sie NodeJS verwenden und mehr Funktionalität benötigen fetch(), oder wenn Sie Schwierigkeiten bei der Verwendung haben, ist Axios die bessere Option. Es ist auch eine gute Wahl für Anfänger, da es mehr Funktionalität bietet und das Codieren vereinfacht.

Fazit und Erkenntnisse

Axios und Fetch API sind beliebte HTTP-Anfragebibliotheken für JavaScript. Beide haben ihre eigenen Vor- und Nachteile, sodass es schwierig ist, definitiv zu sagen, welches besser ist. Die beste Wahl für Sie hängt von den spezifischen Anforderungen, Entwicklungspräferenzen und erforderlichen Funktionen Ihres Projekts ab. Kurz gesagt: Wenn Sie mit JavaScript noch nicht vertraut sind, beginnen Sie wegen der Einfachheit mit Axios. Für mehr Kontrolle und Leistung sollten Sie darüber nachdenken fetch() sobald Sie mit der Sprache vertrauter sind. Eine andere Möglichkeit besteht darin, beide für unterschiedliche Aufgaben zu verwenden.

Axios bietet eine praktische API zum Erstellen von HTTP-Anfragen und zum Verarbeiten von Antworten, einschließlich Promise-Unterstützung, was es bei Entwicklern zu einer beliebten Wahl für die Arbeit mit HTTP in JavaScript macht. Die Fetch-API wurde ursprünglich für die Verwendung in Browsern entwickelt, kann jedoch mithilfe von Polyfills oder externen Bibliotheken auch in anderen Umgebungen wie Node.js verwendet werden. Es ist leichter, aber auch komplexer.

Wenn Sie also Einfachheit benötigen und nur grundlegende HTTP-Funktionen verwenden, fetch() könnte die bessere Option sein. Für komplexere Szenarien, in denen Funktionen wie Zeitüberschreitungen, automatische Datentransformation und verbesserte Fehlerbehandlung erforderlich sind, bietet Axios jedoch umfangreichere Funktionen.