Axios ou Fetch: quoi utiliser en 2019?

Axios est une bibliothèque JavaScript bien connue. Il s'agit d'un client HTTP basé sur les promesses pour les navigateurs et Node.js. Si vous avez travaillé en tant que programmeur JavaScript au cours des dernières années, vous avez certainement utilisé cette bibliothèque. En octobre 2019, le package Axios a été téléchargé à partir de npm 25 millions de fois. Il semble que l'avenir d'Axios soit sans nuage. Mais si je vous dis qu'Axios est un projet mort. C'est exactement le sujet d' une discussion sur Reddit. À savoir, nous parlons de ce qui suit:

• Le référentiel Axios GitHub a un très faible niveau d'activité de développeur.
• Les problèmes et les relations publiques sont ignorés.
• L'équipe de développement est silencieuse.

La situation est aggravée par une vulnérabilité largement discutée. Cette vulnérabilité a été signalée en 2017. Les auteurs du projet l'ont ignorée pendant plus de deux ans.

Lorsque la bibliothèque Axios est devenue populaire, les navigateurs ne disposaient pas d'une API qui implémente un client HTTP basé sur les promesses. L'interface standard de requête HTTP XML (XHR) n'était pas pratique, il était difficile de travailler avec. Les développeurs ont accepté Axios avec plaisir car cette bibliothèque leur a facilité la vie.



L'API Fetch a été publiée en 2015. Pourquoi utilisons-nous toujours Axios en 2019? Comparons ces deux technologies.

Volume de code de modèle

▍Récupérer

fetch('https://jsonplaceholder.typicode.com/todos/1')   .then(response => response.json())   .then(json => console.log(json)) // { //  "userId": 1, //  "id": 1, //  "title": "delectus aut autem", //  "completed": false // } 

▍Axios

 axios.get("https://jsonplaceholder.typicode.com/todos/1")  .then(response => console.log("response", response.data)) // { //  "userId": 1, //  "id": 1, //  "title": "delectus aut autem", //  "completed": false // } 

Lorsque vous utilisez Fetch, vous devez faire face à deux promesses. Mais lorsque nous travaillons avec Axios, nous avons un accès direct au résultat JSON dans la propriété data de l'objet de réponse.

La méthode body mixin json() prend un flux de réponse et le lit complètement. Il renvoie une promesse qui est résolue par le résultat JSON de l'analyse du corps du texte de la demande.

Vous devez utiliser encore plus de code standard dans Fetch lorsque vous travaillez avec des requêtes POST.

▍Récupérer

 fetch("https://jsonplaceholder.typicode.com/posts", {  method: "POST",  body: JSON.stringify({    title: "Title of post",    body: "Post Body"  }) })  .then(res => {    if (!response.ok) throw Error(response.statusText);    return response.json();  })  .then(data => console.log(data))  .catch(error => console.log(error)); 

▍Axios

 axios  .post("https://jsonplaceholder.typicode.com/posts", {    title: "Title of post",    body: "Body of post"  })  .then(response => console.log(response.data))  .catch(error => console.log(error)); 

L'utilisation d'Axios évite d'écrire de grandes quantités de code passe-partout et rend le code plus propre et plus clair.

Gestion des erreurs

▍Récupérer

 fetch("https://jsonplaceholder.typicode.com/todos/100000")  .then(response => {    if (!response.ok) throw Error(response.statusText);    return response.json();  })  .then(data => console.log("data", data))  .catch(error => {    console.log("error", error);  }); // error Error: Not Found 

▍Axios

 axios  .get("https://jsonplaceholder.typicode.com/todos/100000")  .then(response => {    console.log("response", response);  })  .catch(error => {    console.log("error", error);  }); // error Error: Not Found 

La bibliothèque Axios signale des erreurs réseau, mais pas l'API Fetch. Lorsque vous travaillez avec Fetch, vous devez toujours vérifier la propriété response.ok . Afin de simplifier la solution de ce problème, la vérification de cette erreur peut être émise en tant que fonction distincte:

 const checkForError = response => {  if (!response.ok) throw Error(response.statusText);  return response.json(); }; fetch("https://jsonplaceholder.typicode.com/todos/100000")  .then(checkForError)  .then(data => console.log("data", data))  .catch(error => {    console.log("error", error);  }); 

Caractéristiques manquantes

Axios peut suivre la progression du téléchargement des données. Fetch ne prend pas en charge cela. Cela peut être un facteur décisif dans le choix de la technologie pour ceux qui développent une application qui permet aux utilisateurs de télécharger des photos ou des fichiers vidéo sur le serveur.

 const config = {  onUploadProgress: event => console.log(event.loaded) }; axios.put("/api", data, config); 

Bibliothèques alternatives

Voici quelques alternatives à Axios et à l'API Fetch:

• Ky est un client HTTP miniature et intelligent basé sur window.fetch .
• Superagent est une petite bibliothèque cliente HTTP progressive basée sur XMLHttpRequest .

Résumé

Que dois-je utiliser en 2019? Cela dépend de beaucoup. Par exemple, si vous devez suivre la progression du téléchargement de documents sur un serveur, alors Axios ou Superagent vous convient le mieux. Si vous pouvez gérer les limitations de Fetch, vous feriez mieux d'utiliser cette API. Et pour améliorer un peu le code Fetch, essayez une bibliothèque d'encapsuleur comme Ky.

Chers lecteurs! Quels clients HTTP utilisez-vous dans vos projets?