Axios und Fetch-API? Auswahl des richtigen HTTP-Clients

TL;DR: Axios und Fetch API sind beliebte HTTP-Clients. Axios bietet mehr Funktionen und eine einfachere Fehlerbehandlung, während die Fetch-API leichtgewichtig und nativ für Browser ist. Wählen Sie Axios für komplexe Projekte und Fetch für einfachere

Zwei der gebräuchlichsten Methoden zur Verarbeitung asynchroner HTTP-Anfragen sind fetch() und Axios. Obwohl es sich um einen häufigen Vorgang handelt, kann die Art der Anfrage, mit der Sie arbeiten, einen erheblichen Einfluss auf die Benutzerfreundlichkeit und Gesamteffizienz einer App haben. Daher ist es ratsam, sie gründlich zu prüfen und ihre Vor- und Nachteile abzuwägen, bevor Sie sich für eines entscheiden.

In diesem Artikel werden diese beiden weit verbreiteten Tools umfassend verglichen, um Ihnen dabei zu helfen, die beste Wahl für Ihr Projekt zu treffen.

Was ist Axios?

ist ein Promise-basierter HTTP-Client eines Drittanbieters, der häufig in Browser- ( XMLHttpRequests ) und Node.js-Umgebungen (HTTP) verwendet wird. Es bietet eine praktische API, mit der Anfragen und Antworten abgefangen, Anfragen abgebrochen und Antwortdaten automatisch im JSON-Format analysiert werden können. Axios unterstützt auch den clientseitigen Schutz vor XSRF (Cross-Site Request Forgery). Sie können Axios mit einem Paketmanager wie npm installieren oder über ein CDN zu Ihrem Projekt hinzufügen.

// NPM
npm install axios

// CDN
<script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>

Vorteile von Axios

• Automatische Anfragestornierung.
• Eingebaute Fehlerbehandlung, Interceptoren und saubere Syntax.
• Kompatibilität mit einer Vielzahl alter und moderner Browser.
• Versprechenbasiert.

Nachteile von Axios

• Externe Abhängigkeit.
• Große Bündelgröße und spürbare Komplexität.

Was ist fetch()?

Die Fetch-API basiert ebenfalls auf Versprechen, ist jedoch eine native JavaScript-API, die in allen modernen Browsern verfügbar ist. Es ist auch mit Node.js-Umgebungen kompatibel und ersetzt die alten XMLHttpRequests durch einen einfacheren und zeitgemäßeren Ansatz. Die Fetch-API stellt die Methode fetch() zum Senden von Anforderungen bereit und unterstützt mehrere Anforderungs- und Antworttypen wie JSON, Blob und FormData.

Vorteile von fetch()

• Native Browserunterstützung, also keine externen Abhängigkeiten.
• Leichte und unkompliziertere API.
• Versprechenbasiert.
• fetch() ist eine Low-Level-API. Es bietet also eine detailliertere Kontrolle.

Nachteile von fetch()

• Eingeschränkte integrierte Funktionen für Fehlerbehandlung und Anforderungs-Timeout im Vergleich zu Axios.
• Ausführlicher Code für allgemeine Aufgaben.

Unterschiede zwischen Axios und fetch()

Da Sie jetzt verstehen, was Axios und fetch() sind, vergleichen und vergleichen wir einige Schlüsselfunktionen dieser beiden anhand von Codebeispielen.

Grundlegende Syntax

Was die Syntax betrifft, liefert Axios eine kompaktere und entwicklerfreundlichere Syntax als fetch().

Einfache POST-Anfrage mit Axios:

// NPM
npm install axios

// CDN
<script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>

Ähnliche POST-Anfrage mit fetch():

axios.post('https://jsonplaceholder.typicode.com/todos', {
  userId: 11,
  id: 201,
  title: "Try Axios POST",
  completed: true
})
.then(response => {
  document.getElementById('output').innerHTML = `
    <h2>Post Created:</h2>
    <p>Title: ${response.data.title}</p>
    <p>Completed status: ${response.data.completed}</p>
  `;
})
.catch(error => {
  console.error('Error:', error);
  document.getElementById('output').innerHTML = '<p>Error creating post.</p>';
});

Es ist ziemlich auffällig, denn obwohl fetch() leichtgewichtig ist, erfordert es dennoch mehr manuelle Arbeit, um einige häufige Aufgaben auszuführen. Axios verfügt beispielsweise über automatisches JSON-Parsing und kann direkt auf das Datenobjekt der Antwort zugreifen. Im Gegensatz dazu müssen Sie bei fetch() die Antwort manuell in das JSON-Format analysieren. Obwohl beide vorgestellten Ansätze ähnliche Ergebnisse liefern, müssen Sie die Fehler, Serialisierungen und Header in fetch() explizit behandeln.

Fehlerbehandlung

Der Umgang mit Fehlern ist etwas, mit dem Entwickler fast täglich konfrontiert werden. Axios beispielsweise behandelt jeden HTTP-Aufruf mit einem Statuscode außerhalb des 2xx-Bereichs standardmäßig als Fehler. Es stellt Ihnen ein erklärendes Objekt zur Verfügung, das bei der Verwaltung und Fehlerbehebung Ihrer Fehler nützlich ist.

fetch('https://jsonplaceholder.typicode.com/todos', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ // Manually converting the object to JSON
    userId: 11,
    id: 202,
    title: 'Try Fetch POST',
    completed: true
  })
})
.then(response => {
  if (!response.ok) { // Manual error handling for HTTP errors
    throw new Error('Error creating post');
  }
  return response.json(); // Manually parsing the response to JSON
});

fetch() behandelt HTTP-Fehler (Statuscodes 4xx oder 5xx) nicht automatisch als Fehler. Sie müssen Bedingungsprüfungen manuell durchführen, um den Antwortstatus zu ermitteln und den Fehler zu erfassen. Aber Sie können in Ihrem Projekt eine benutzerdefinierte Fehlerbehandlungslogik haben, um Informationen zu sammeln und Fehler zu behandeln, wie es Axios tut.

axios.get('https://jsonplaceholder.typicode.com/invalid_endpoint')
 .then(response => {
  console.log(response.data);
 })
 .catch(error => {
  if (error.response) {
   // Server responded with a status outside of 2xx
   console.log('Error Status:', error.response.status);
   console.log('Error Data:', error.response.data);
 } else if (error.request) {
   console.log('Error Request:', error.request);
 } else {
   console.log('Error Message:', error.message);
 }});

Abwärtskompatibilität mit Browsern

Wenn Sie Kompatibilität mit älteren Abhängigkeiten benötigen, z. B. einem älteren Browser wie Internet Explorer (IE11) oder älteren Versionen der meisten modernen Browser, ist Axios Ihre Lösung der Wahl.

fetch() ist in modernen Browsern integriert und funktioniert nahtlos mit diesen. Allerdings werden einige ältere Browserversionen nicht unterstützt. Sie können es weiterhin mit Polyfills wie whatwg-fetch verwenden, um es in Browsern zum Laufen zu bringen, die fetch() nicht verwenden. Es ist jedoch wichtig zu beachten, dass die Verwendung von Polyfills die Bündelgröße erhöhen und die Leistung beeinträchtigen kann.

!(https://www.syncfusion.com/blogs/wp-content/uploads/2024/11/Fetch-compatibility.png)

HTTP-Abfangjäger

HTTP-Interceptoren ermöglichen das Abfangen von Anfragen und Antworten und sind nützlich, wenn:

• Ändern von Anforderungen (z. B. beim Hinzufügen von Authentifizierung zu Headern).
• Antworten transformieren (Antwortdaten vorverarbeiten).
• Globale Fehlerbehandlung (Protokollierung und Umleitung bei Auftreten eines nicht autorisierten 401-Fehlers).

Diese leistungsstarke Funktion ist in Axios standardmäßig enthalten, wird jedoch von fetch() nicht nativ unterstützt.

Authentifizierungstoken zu Anfragen mit Axios hinzufügen:

// NPM
npm install axios

// CDN
<script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>

Das bedeutet jedoch nicht, dass fetch() kein HTTP-Abfangen durchführen kann. Sie können Middleware verwenden, um manuell einen benutzerdefinierten Wrapper zu schreiben, um dieses Verhalten nachzuahmen.

Authentifizierungstoken zu Anfragen mit fetch()-Wrapper hinzufügen:

axios.post('https://jsonplaceholder.typicode.com/todos', {
  userId: 11,
  id: 201,
  title: "Try Axios POST",
  completed: true
})
.then(response => {
  document.getElementById('output').innerHTML = `
    <h2>Post Created:</h2>
    <p>Title: ${response.data.title}</p>
    <p>Completed status: ${response.data.completed}</p>
  `;
})
.catch(error => {
  console.error('Error:', error);
  document.getElementById('output').innerHTML = '<p>Error creating post.</p>';
});

Reaktionszeitüberschreitung

Antwort-Timeout bezieht sich auf die Zeit, die ein Client auf die Antwort des Servers wartet. Bei Erreichen dieser Frist gilt die Anfrage als erfolglos. Axios und fetch() unterstützen Anforderungszeitüberschreitungen, die bei unzuverlässigen oder langsamen Netzwerken unerlässlich sind. Dennoch übernimmt Axios die Führung, indem es einen einfacheren Ansatz für das Time-Out-Management bietet.

Eine Auszeit mit Axios beantragen:

fetch('https://jsonplaceholder.typicode.com/todos', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ // Manually converting the object to JSON
    userId: 11,
    id: 202,
    title: 'Try Fetch POST',
    completed: true
  })
})
.then(response => {
  if (!response.ok) { // Manual error handling for HTTP errors
    throw new Error('Error creating post');
  }
  return response.json(); // Manually parsing the response to JSON
});

Ein Anforderungstimeout mit fetch():

axios.get('https://jsonplaceholder.typicode.com/invalid_endpoint')
 .then(response => {
  console.log(response.data);
 })
 .catch(error => {
  if (error.response) {
   // Server responded with a status outside of 2xx
   console.log('Error Status:', error.response.status);
   console.log('Error Data:', error.response.data);
 } else if (error.request) {
   console.log('Error Request:', error.request);
 } else {
   console.log('Error Message:', error.message);
 }});

Axios handhabt die Zeitüberschreitungen einfacher und eleganter mit saubererem Code mithilfe seiner Timeout-Option. fetch() erfordert jedoch eine manuelle Timeout-Behandlung mit AbortController(), wodurch Sie mehr Kontrolle darüber haben, wie und wann die Anforderung abgebrochen wird.

GitHub-Referenz

Weitere Einzelheiten finden Sie in den vollständigen Beispielen für Axios vs. Fetch im GitHub-Repository.

Abschluss

Wie viele Tools haben sowohl Axios als auch Fetch API Stärken und Schwächen. Wenn Sie automatisches Parsen von JSON, integrierte Fehlerbehandlung und Interceptoren zur Rationalisierung komplizierter Prozesse benötigen, entscheiden Sie sich für Axios. Wählen Sie fetch(), wenn Sie eine schlichte und einfache Schnittstelle wünschen, die sich am besten für moderne Browserumgebungen eignet und keine externe Bibliothek erfordert. Kurz gesagt, beide funktionieren gut, sind aber für unterschiedliche Komplexitätsgrade und Funktionalitätsanforderungen geeignet.

Verwandte Blogs

• 5 Best Practices für den Umgang mit HTTP-Fehlern in JavaScript
• Top 5 Chrome-Erweiterungen für die Verarbeitung von HTTP-Anfragen
• So migrieren Sie ASP.NET-HTTP-Handler und -Module zur ASP.NET Core-Middleware
• CRUD-Aktionen in Syncfusion ASP.NET MVC DataGrid mit Fetch Request effizient verarbeiten

Das obige ist der detaillierte Inhalt vonAxios und Fetch-API? Auswahl des richtigen HTTP-Clients. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!