Différence entre Axios et Fetch en Javascript

En JavaScript, Axios et l'API Fetch native sont utilisés pour effectuer des requêtes HTTP, mais ils présentent quelques différences en termes de fonctionnalités, de facilité d'utilisation et de fonctionnalité. Voici une répartition :

1. Facilité d'utilisation :

• Axios :
  
  Axios simplifie la création de demandes et la gestion des réponses. Il analyse automatiquement les réponses JSON, ce qui facilite le travail.
  

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

• Récupérer :
  
  Avec fetch, vous devez gérer explicitement l'analyse JSON, ce qui ajoute une étape supplémentaire.
  

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

2. Gestion des réponses :

• Axios : Axios résout automatiquement la réponse et renvoie une erreur si l'état de la réponse est en dehors de la plage 2xx, afin que vous puissiez gérer directement les erreurs dans le bloc .catch().

• Récupérer :
  
  Avec la récupération, les codes d'état non-2xx (comme 404 ou 500) ne sont pas traités comme des erreurs. Vous devez vérifier manuellement l'état de la réponse et générer une erreur si nécessaire.
  

   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. Interception des demandes et des réponses :

• Axios :
  
  Axios fournit des intercepteurs intégrés, vous permettant de modifier les requêtes ou de gérer les réponses de manière globale, ce qui peut être utile pour ajouter des jetons d'authentification, la journalisation, etc.
  

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

• Récupérer :
  
  Fetch n'a pas d'intercepteurs intégrés, vous devez donc envelopper manuellement l'appel fetch dans une fonction personnalisée si vous avez besoin de ce comportement.

4. Compatibilité des navigateurs :

• Axios : Axios fonctionne sur les anciens navigateurs (IE 11 et versions antérieures) et gère les polyfills en interne.
• Récupérer : L'API Fetch n'est pas prise en charge dans Internet Explorer. Vous aurez peut-être besoin d'un polyfill comme whatwg-fetch pour le prendre en charge dans les anciens navigateurs.

5. Traitement des données :

• Axios :
  
  Axios chaîne automatiquement les données lors des requêtes POST et définit le Content-Type sur application/json. Il prend également en charge l'envoi facile de données dans d'autres formats comme FormData.
  

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

• Récupérer :
  
  Lors de la récupération, vous devez chaîner manuellement les données et définir les en-têtes pour les requêtes POST.
  

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

6. Annulation des demandes :

• Axios :
  
  Axios dispose d'un support intégré pour l'annulation des demandes à l'aide de CancelToken.
  

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

• Récupérer :
  
  Avec fetch, vous devrez utiliser AbortController pour annuler les requêtes, ce qui peut être un peu plus complexe.
  

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

7. Gestion des erreurs :

• Axios : Axios génère automatiquement des erreurs pour les réponses non-2xx, et la gestion des erreurs est plus cohérente et centralisée.
• Récupérer : La récupération nécessite une gestion plus manuelle des erreurs, car elle rejettera uniquement la promesse pour les erreurs réseau, pas pour les codes d'état d'erreur HTTP.

Conclusion:

• Axios est plus riche en fonctionnalités, facile à utiliser et offre une meilleure abstraction pour le traitement des demandes.
• Fetch est une API native et moderne qui nécessite moins de dépendances mais nécessite plus de travail manuel pour gérer certaines fonctionnalités telles que les erreurs, les intercepteurs et la gestion des données.

Si vous préférez plus de contrôle sur vos demandes, vous pouvez vous en tenir à la récupération. Si vous voulez quelque chose qui simplifie les requêtes HTTP, axios serait la meilleure option.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!