Unterschied zwischen Axios und Fetch in Javascript

In JavaScript werden sowohl Axios als auch die native Fetch-API verwendet, um HTTP-Anfragen zu stellen, aber sie weisen einige Unterschiede in Bezug auf Features, Benutzerfreundlichkeit und Funktionalität auf. Hier ist eine Aufschlüsselung:

1. Benutzerfreundlichkeit:

• Axios:
  
  Axios vereinfacht das Stellen von Anfragen und die Bearbeitung von Antworten. Es analysiert automatisch JSON-Antworten und erleichtert so die Arbeit.
  

   axios.get('/api/user')
     .then(response => console.log(response.data))
     .catch(error => console.error(error));
  

• Abrufen:
  
  Beim Abrufen müssen Sie die JSON-Analyse explizit durchführen, was einen zusätzlichen Schritt hinzufügt.
  

   fetch('/api/user')
     .then(response => response.json())
     .then(data => console.log(data))
     .catch(error => console.error(error));
  

2. Antwortverarbeitung:

• Axios: Axios löst die Antwort automatisch auf und gibt einen Fehler aus, wenn der Antwortstatus außerhalb des Bereichs von 2xx liegt, sodass Sie Fehler direkt im .catch()-Block behandeln können.

• Abrufen:
  
  Beim Abrufen werden Nicht-2xx-Statuscodes (wie 404 oder 500) nicht als Fehler behandelt. Sie müssen den Antwortstatus manuell überprüfen und bei Bedarf einen Fehler auslösen.
  

   fetch('/api/user')
     .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(error));
  

3. Abfangen von Anfragen und Antworten:

• Axios:
  
  Axios bietet integrierte Interceptoren, die es Ihnen ermöglichen, Anfragen zu ändern oder Antworten global zu verarbeiten, was beim Hinzufügen von Authentifizierungstokens, Protokollierung usw. nützlich sein kann.
  

   axios.interceptors.request.use(config => {
     config.headers['Authorization'] = 'Bearer token';
     return config;
   });
  

• Abrufen:
  
  Fetch verfügt nicht über integrierte Interceptoren, daher müssen Sie den Fetch-Aufruf manuell in eine benutzerdefinierte Funktion einschließen, wenn Sie dieses Verhalten benötigen.

4. Browserkompatibilität:

• Axios: Axios funktioniert auf älteren Browsern (IE 11 und früher) und verarbeitet Polyfills intern.
• Abrufen: Die Fetch-API wird im Internet Explorer nicht unterstützt. Möglicherweise benötigen Sie ein Polyfill wie whatwg-fetch, um es in älteren Browsern zu unterstützen.

5. Datenverarbeitung:

• Axios:
  
  Axios stringifiziert Daten automatisch, wenn es POST-Anfragen stellt, und setzt den Content-Type auf application/json. Es unterstützt auch problemlos das Senden von Daten in anderen Formaten wie FormData.
  

   axios.post('/api/user', { name: 'John' });
  

• Abrufen:
  
  Beim Abrufen müssen Sie die Daten manuell stringifizieren und die Header für POST-Anfragen festlegen.
  

   fetch('/api/user', {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ name: 'John' })
   });
  

6. Anfragen stornieren:

• Axios:
  
  Axios verfügt über integrierte Unterstützung für das Abbrechen von Anfragen mithilfe von CancelToken.
  

   const source = axios.CancelToken.source();
   axios.get('/api/user', { cancelToken: source.token });
   source.cancel('Request canceled.');
  

• Abrufen:
  
  Beim Abrufen müssten Sie AbortController verwenden, um Anfragen abzubrechen, was etwas komplexer sein kann.
  

   const controller = new AbortController();
   fetch('/api/user', { signal: controller.signal });
   controller.abort();
  

7. Fehlerbehandlung:

• Axios: Axios löst bei Nicht-2xx-Antworten automatisch Fehler aus und die Fehlerbehandlung ist konsistenter und zentralisiert.
• Abrufen: Fetch erfordert mehr manuelle Fehlerbehandlung, da das Versprechen nur bei Netzwerkfehlern abgelehnt wird, nicht bei HTTP-Fehlerstatuscodes.

Abschluss:

• Axios ist funktionsreicher, benutzerfreundlicher und bietet eine bessere Abstraktion für die Bearbeitung von Anfragen.
• Fetch ist eine moderne, native API, die weniger Abhängigkeiten erfordert, aber mehr manuelle Arbeit erfordert, um bestimmte Funktionen wie Fehler, Interceptoren und Datenverarbeitung zu verarbeiten.

Wenn Sie mehr Kontrolle über Ihre Anfragen bevorzugen, bleiben Sie vielleicht bei fetch. Wenn Sie etwas wollen, das HTTP-Anfragen vereinfacht, wäre Axios die bessere Option.

Das obige ist der detaillierte Inhalt vonUnterschied zwischen Axios und Fetch in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!