En tant que développeur largement autodidacte, j’ai mis le vaste monde des tutoriels Internet gratuits ou payants à l’épreuve. Quelque chose que je vois surgir encore et encore dans les tutoriels effectuant des requêtes HTTP est l’utilisation d’une bibliothèque JavaScript appelée Axios. Je voulais comprendre pourquoi un si grand nombre de formateurs en développement Web utilisaient cette bibliothèque apparemment discrète. J’ai donc décidé de creuser pour livrer une explication très simple et directe de ce qu’offre Axios et pourquoi il vaut (probablement) la peine de l’utiliser.
Ce qu’il fait
En bref, Axios est une bibliothèque Javascript utilisée pour effectuer des requêtes HTTP depuis node.js ou des XMLHttpRequests depuis le navigateur qui prend également en charge l’API Promise ES6. Super, donc d’après ce que nous avons compris, elle fait quelque chose que nous pouvons déjà faire et qui a récemment été amélioré de manière significative… Alors pourquoi s’en préoccuper ?
Ce qu’elle vise à améliorer : .fetch()
Fetch utilise un processus en deux étapes lorsqu’elle traite des données JSON ; après avoir effectué une requête initiale, vous devrez ensuite appeler la méthode .json() sur la réponse afin de recevoir l’objet de données réel. Si je devais avoir une requête de récupération pour récupérer un objet de conducteurs pertinents pour mon application de recherche de covoiturage, je pourrais avoir quelque chose comme ce qui suit :
const baseUrl = 'http://localhost:3000/api/v1'fetch(`${baseUrl}/drivers`).then(res => res)
Ceci renverrait une promesse en attente et un objet de réponse me faisant savoir que ma requête a réussi, mais où sont mes données ? ! Nous devons nous rappeler de passer notre réponse à la méthode .json() également.
const baseUrl = 'http://localhost:3000/api/v1'fetch(`${baseUrl}/drivers`).then(res => res.json())
Maintenant, ce n’est pas un gros problème, comme beaucoup de choses, cela se résume vraiment à la mémorisation de la syntaxe. Mais en tant que développeurs, nous sommes simultanément les créatures les plus paresseuses et les plus efficaces de la planète – donc toute sorte de sténographie ou de gain de temps vaut la peine d’être considérée, entre Axios.
Meilleure gestion des erreurs
Il y a un peu de travail supplémentaire que nous devons faire de notre côté (encore une fois, on pourrait dire que c’est juste une question de mémorisation syntaxique) pour le résultat souhaité quand il s’agit de journaliser correctement les erreurs de réponse avec .fetch(). MDN explique:
Une promesse
fetch()rejettera avec unTypeErrorlorsqu’une erreur de réseau est rencontrée ou que CORS est mal configuré du côté du serveur, bien que cela signifie généralement des problèmes de permission ou similaires – un 404 ne constitue pas une erreur de réseau, par exemple.
Supposons que quelque chose ne va pas avec notre variable baseUrl. L’attente de la sortie pour le bloc de code suivant serait l’erreur, mais au lieu de cela, c’est ok. Pourquoi cela ?
const baseUrl = 'http://localhost:3000/api/v1'fetch(`${baseUrl}/drivers`)
.catch(error => console.log('ok'))
.then(res => console.log('error'));
Il s’avère que fetch() ne rejette les promesses que dans des situations d’erreur réseau relativement rares, comme un échec de recherche DNS. Heureusement, fetch() fournit un simple drapeau ok qui indique si le code d’état d’une réponse est dans la plage de réussite ou non. En général, ce qui se passe, c’est que vous finirez par écrire une fonction de gestion d’erreur unique à utiliser sur tous vos appels fetch().
Installation d’Axios
La récupération de nouvelles bibliothèques est facile comme bonjour (Mmm.. rhubarbe), je préfère npm. À la racine du dossier de votre projet, ouvrez un terminal, exécutez npm install axios et vous êtes prêt. Maintenant, pour réaliser la même requête de récupération que nous avons effectuée plus tôt, nous pouvons invoquer axios.get() à la place de notre méthode de récupération comme suit:
const baseUrl = 'http://localhost:3000/api/v1'axios.get(`${baseUrl}/drivers`).then(res => res)
Presto ! En utilisant axios, nous supprimons la nécessité de transmettre les résultats de la requête HTTP à la méthode .json(). Axios renvoie simplement et directement l’objet de données attendu. En outre, tout type d’erreur dans une requête HTTP entraîne l’exécution du bloc .catch() dès le départ. Voici un bref récapitulatif de toutes ses fonctionnalités principales, y compris quelques-unes que je n’ai pas couvertes directement depuis la page GitHub :
- Faire des requêtes XMLHttpRequests depuis le navigateur
- Faire des requêtes http depuis node.js
- Support de l’API Promise
- Interception de la demande et de la réponse
- Transformation de la demande et des données de réponse
- Annulation des demandes
- Transformations automatiques pour les données JSON
- Support côté client pour la protection contre XSRF
En résumé, Axios est une amélioration de la qualité de vie plus qu’autre chose. Mais faire de nombreux petits ajustements incrémentaux de qualité de vie à son flux de travail peut améliorer drastiquement la qualité et la vitesse de développement.