Version portugaise

Axios et Fetch sont des outils populaires pour effectuer des requêtes HTTP en JavaScript, mais ils présentent quelques différences clés. Voici un résumé :

Axios

• Fonctionnalités intégrées : Axios est livré avec de nombreuses fonctionnalités intégrées, telles que la transformation JSON automatique, les intercepteurs de requêtes et de réponses et l'annulation des requêtes.
• Compatibilité des navigateurs : prend en charge les anciens navigateurs, y compris Internet Explorer.
• Gestion des erreurs : Axios rejette automatiquement les promesses pour les statuts d'erreur HTTP (tels que 404 ou 500), ce qui facilite la gestion des erreurs.
• Intercepteurs de requêtes/réponses : vous permet de modifier globalement des requêtes ou des réponses de manière simple.
• Annulation de demande : Axios offre un moyen simple d'annuler les demandes.

Aller chercher

• API native : Fetch est une API Web native, ce qui signifie qu'il n'est pas nécessaire d'installer des bibliothèques supplémentaires.
• Basé sur des promesses : utilise des promesses, mais vous devez vérifier manuellement l'état de la réponse pour détecter les erreurs.
• Gestion du flux : Fetch prend en charge le streaming, ce qui peut être utile pour gérer des réponses volumineuses.
• Plus de contrôle : offre plus de contrôle sur les requêtes, mais nécessite plus de code supplémentaire pour des fonctionnalités telles que la définition de modèles ou l'interception de requêtes.
• Pas de prise en charge intégrée pour JSON : vous devez appeler .json() sur l'objet de réponse pour analyser les données JSON.

Cas d'utilisation

• Utilisez Axios si vous avez besoin d'un riche ensemble de fonctionnalités prêtes à l'emploi, en particulier pour les applications complexes.
• Utilisez Fetch pour des cas d'utilisation plus simples ou lorsque vous souhaitez éviter les dépendances externes.

Exemple d'utilisation

Axios :

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

const options = {
  url: 'http://localhost/test.htm',
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json;charset=UTF-8'
  },
  data: {
    a: 10,
    b: 20
  }
};
axios(options)
  .then(response => {
    console.log(response.status);
  });

Aller chercher:

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

const url = "https://jsonplaceholder.typicode.com/todos";
const options = {
  method: "POST",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json;charset=UTF-8",
  },
  body: JSON.stringify({
    a: 10,
    b: 20,
  }),
};
fetch(url, options)
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  });

Remarques :

• Pour envoyer des données, fetch() utilise la propriété body pour une requête POST, tandis qu'Axios utilise la propriété data.
• Les données de fetch() sont transformées en chaîne à l'aide de la méthode JSON.stringify.
• Axios transforme automatiquement les données renvoyées par le serveur, mais avec fetch(), vous devez appeler la méthode Response.json() pour analyser les données en un objet JavaScript.
• Avec Axios, la réponse aux données fournie par le serveur est accessible dans l'objet de données, tandis que dans la méthode fetch(), les données finales peuvent être nommées avec n'importe quelle variable.

Conclusion

Les deux ont leurs atouts, et le choix dépend souvent de vos besoins et préférences spécifiques. Si vous créez une application plus grande avec de nombreuses interactions API, Axios peut faciliter certaines tâches, tandis que Fetch est idéal pour les tâches simples.

Axios propose une API conviviale qui simplifie la plupart des tâches de communication HTTP. Cependant, si vous préférez utiliser les fonctionnalités natives du navigateur, vous pouvez certainement implémenter vous-même des fonctionnalités similaires avec l'API Fetch.

Comme nous l'avons exploré, il est tout à fait possible de répliquer les fonctionnalités principales d'Axios à l'aide de la méthode fetch() disponible dans les navigateurs. La décision d'inclure une bibliothèque HTTP client dépend en fin de compte de votre aisance avec les API natives et des exigences spécifiques de votre projet.

Pour plus d'informations : https://medium.com/trainingcenter/axios-ou-fetch-765e5db9dd59