Présente Axios, un client HTTP populaire basé sur la promesse –

Axios est un client HTTP populaire basé sur des promesses qui arbore une API facile à utiliser et peut être utilisé à la fois dans le navigateur et Node.js.

Faire des requêtes HTTP pour récupérer ou sauvegarder des données est l'une des tâches les plus courantes qu'une application JavaScript côté client devra effectuer. Les bibliothèques tierces – en particulier jQuery – ont longtemps été un moyen populaire d'interagir avec les API de navigateur plus détaillées et d'éliminer les différences entre les navigateurs

lorsque les utilisateurs s'éloignent de jQuery en faveur d'API DOM natives améliorées, ou les bibliothèques de l'interface utilisateur frontale comme React et Vue.js, y compris pour sa fonctionnalité $ .ajax n'a pas de sens.

Voyons comment commencer à utiliser Axios dans votre code, et Voici quelques-unes des fonctionnalités qui contribuent à sa popularité parmi les développeurs JavaScript.

Axios vs Fetch

Comme vous le savez probablement, les navigateurs modernes sont livrés avec l'API Fetch API plus récente, alors pourquoi pas juste utiliser ça? Il y a plusieurs différences entre les deux qui donnent à Axios l'avantage.

Une telle différence réside dans la façon dont les deux bibliothèques traitent les codes d'erreur HTTP . Lorsque vous utilisez Fetch, si le serveur renvoie une erreur de série 4xx ou 5xx, votre rappel catch () ne sera pas déclenché et il appartient au développeur de vérifier le code d'état de réponse pour déterminer si la requête a été réussi. Axios, d'autre part, rejettera la promesse de la demande si l'un de ces codes d'état est retourné.

Une autre petite différence, qui déroute souvent les développeurs qui découvrent l'API, est que Fetch n'envoie pas automatiquement les cookies au serveur. serveur lors de la demande. Il est nécessaire de passer explicitement une option pour qu'ils soient inclus. Axios a votre dos ici.

Une différence qui pourrait finir par être un frein pour certains est la mise à jour des progrès sur les téléchargements / téléchargements. Comme Axios est construit au-dessus de l'ancienne API XHR, vous pouvez enregistrer les fonctions de rappel pour onUploadProgress et onDownloadProgress pour afficher le pourcentage complet dans l'interface utilisateur de votre application. Actuellement, Fetch n'a aucun support pour le faire.

Enfin, Axios peut être utilisé à la fois dans le navigateur et Node.js. Cela facilite le partage du code JavaScript entre le navigateur et l'arrière-plan ou le rendu côté serveur de vos applications frontales.

Remarque: il existe des versions de l'API Fetch disponibles pour Node . »

Installation

Comme vous pouvez vous en douter, la façon la plus courante d'installer Axios est via le gestionnaire de paquets npm:

 npm i axios

et incluez-le dans votre code si nécessaire:

 // Importation de style ES2015
importer des axios de 'axios';

// Le style Node.js nécessite
const axios = require ('axios');

Si vous n'utilisez pas un bundler de modules (par exemple webpack), vous pouvez toujours extraire la bibliothèque à partir d'un CDN de la manière traditionnelle:

Browser support

Axios fonctionne dans tous les navigateurs modernes , et Internet Explorer 8 +

Faire des demandes

Similaire à la fonction $ .ajax de jQuery, vous pouvez effectuer n'importe quelle requête HTTP en passant un objet d'options à Axios:

 axios ( {
  méthode: "post",
  url: '/ login',
  Les données: {
    utilisateur: 'brunos',
    lastName: 'ilovenodejs'
  }
});

Ici, nous indiquons à Axios la méthode HTTP que nous aimerions utiliser (par exemple GET / POST / DELETE, etc.) et à quelle URL la requête doit être faite.

Nous fournissons également des données à être envoyé avec la requête sous la forme d'un simple objet JavaScript de paires clé / valeur. Par défaut, Axios le sérialisera comme JSON et l'enverra comme le corps de la requête

Request Options

Il y a tout un tas de options supplémentaires que vous pouvez passer quand vous faites une requête, mais voici les plus communs:

• baseUrl : si vous spécifiez une URL de base, elle sera préfixée à toute URL relative que vous utiliserez
• headers : un objet de paire clé / valeur à envoyer comme en-têtes
• params : un objet de paires clé / valeur qui sera sérialisé et ajouté à l'URL comme une chaîne de requête
• responseType : si vous attendez une réponse dans un format autre que JSON, vous pouvez définir cette propriété sur arraybuffer blob document text ou stream .
• auth : passer un objet avec nom d'utilisateur et mot de passe champs utilisera ces informations d'identification pour l'authentification HTTP Basic sur le r

Méthodes commodes

Comme jQuery, il existe des méthodes de raccourcis pour effectuer différents types de requêtes

get delete head et options méthodes prennent toutes deux deux arguments: une URL, et un objet de configuration facultatif.

 axios.get ('/ products / 5');

Les méthodes post put et prennent un objet de données comme second argument, et un objet de configuration optionnel comme troisième:

 axios.post (
  '/des produits',
  {nom: 'Gaufrier', prix: 21,50},
  {options}
)

Réception d'une réponse

Une fois que vous avez fait une requête, Axios renvoie une promesse qui se résoudra en un objet de réponse ou un objet d'erreur.

 axios.get ('/ product / 9')
  .then (réponse => console.log (réponse))
  .catch (erreur => console.log (erreur));

L'objet de réponse

Lorsque la requête aboutit, votre callback then () recevra un objet de réponse avec les propriétés suivantes:

• data : la charge retournée par le serveur . Par défaut, Axios attend JSON et va l'analyser pour vous dans un objet JavaScript
• status : le code HTTP renvoyé par le serveur
• statusText : le message d'état HTTP renvoyé par le serveur .
• headers : tous les en-têtes renvoyés par le serveur
• config : la configuration initiale de la requête
• request : l'objet XMLHttpRequest ( lors de l'exécution dans un navigateur).

L'objet erreur

S'il y a un problème avec la requête, la promesse sera rejetée avec un objet erreur contenant au moins certaines des propriétés suivantes:

• message : le texte du message d'erreur
• réponse : l'objet de réponse (si reçu) comme décrit dans la section précédente.
• request : l'objet XMLHttpRequest réel (lors de l'exécution dans un navigateur).
• config : la configuration initiale de la requête.

Transfo rms et Interceptors

Axios fournit quelques fonctionnalités soignées inspirées de la bibliothèque HTTP $ d'Angular . Bien qu'ils semblent similaires, ils ont des cas d'utilisation légèrement différents

Transforms

Axios vous permet de fournir des fonctions pour transformer les données sortantes ou entrantes, sous la forme de deux options de configuration que vous pouvez définir lors d'une requête: transformRequest et transformResponse . Les deux propriétés sont des tableaux, vous permettant d'enchaîner plusieurs fonctions que les données seront transmises.

Toutes les fonctions passées à transformRequest sont appliquées aux requêtes PUT, POST et PATCH. Ils reçoivent les données de la requête, et les en-têtes sont des arguments et doivent renvoyer un objet de données modifié

 const options = {
  transformRequest: [
    (data, headers) => {
      // do something with data
      return data;
    }
  ]
}

Les fonctions peuvent être ajoutées à transformResponse de la même manière, mais sont appelées uniquement avec les données de réponse, et avant que la réponse ne soit transmise aux rappels chaînés then () . 19659003] Alors, à quoi pourrions-nous utiliser les transformations? Un cas d'utilisation potentiel concerne une API qui attend des données dans un format particulier – par exemple XML ou même CSV. Vous pouvez configurer une paire de transformations pour convertir les données sortantes et entrantes vers et à partir du format requis par l'API.

Notons que les fonctions transformRequest et transformResponse par défaut d'Axios

Intercepteurs

Alors que les transformations permettent de modifier les données sortantes et entrantes, Axios vous permet également d'ajouter des fonctions appelées intercepteurs . Comme les transformations, ces fonctions peuvent être attachées au feu lorsqu'une requête est faite, ou lorsqu'une réponse est reçue.

 // Ajouter un intercepteur de requête
axios.interceptors.request.use ((config) => {
    // Fait quelque chose avant que la requête ne soit envoyée
    retour config;
  }, (erreur) => {
    // Fait quelque chose avec une erreur de requête
    return Promise.reject (erreur);
  });

// Ajouter un intercepteur de réponse
axios.interceptors.response.use ((réponse) => {
    // Faire quelque chose avec des données de réponse
    réponse de retour;
  }, (erreur) => {
    // Fait quelque chose avec une erreur de réponse
    return Promise.reject (erreur);
  });

Comme vous avez pu le constater dans les exemples ci-dessus, les intercepteurs ont des différences importantes par rapport aux transformées. Au lieu de simplement recevoir les données ou les en-têtes, les intercepteurs reçoivent l'objet complet config ou response.

Lorsque vous créez des intercepteurs, vous pouvez également choisir de fournir une fonction de gestionnaire d'erreur qui vous permet d'identifier les erreurs. 19659003] Les intercepteurs de requête peuvent être utilisés pour faire des choses comme récupérer un jeton du stockage local et l'envoyer avec toutes les demandes tandis qu'un intercepteur de réponse pourrait être utilisé pour capturer 401 réponses et rediriger vers une page de connexion pour l'autorisation

Extensions tierces

En tant que bibliothèque populaire, Axios bénéficie d'un écosystème de bibliothèques tierces qui étendent ses fonctionnalités. Des intercepteurs aux adaptateurs de test en passant par les enregistreurs, il y a toute une variété disponible. Voici quelques-uns que je pense que vous pourriez trouver utiles:

• axios-mock-adapter : permet de se moquer facilement des requêtes pour faciliter le test de votre code
• axios-cache-plugin : un wrapper pour mettre sélectivement en cache les requêtes GET.
• redux-axios-middleware : si vous êtes un utilisateur Redux, ce middleware fournit un moyen efficace d'envoyer des requêtes Ajax avec des actions simples.

Une liste de plus de ] Les add-ons et extensions Axios sont disponibles sur le repo Axios GitHub.

En résumé, Axios a beaucoup à recommander. Il a une API simple, avec des méthodes de raccourcis utiles qui seront familiers à tous ceux qui ont déjà utilisé jQuery. Sa popularité, et la disponibilité d'une variété d'add-ons tiers, en font un choix solide pour inclure dans vos applications, que ce soit frontend, back end, ou les deux.

Nilson est un full développeur Web -stack qui travaille avec les ordinateurs et le web depuis plus d'une décennie. Un ancien technicien du matériel et administrateur réseau. Nilson est actuellement co-fondateur et développeur d'une société développant des applications web pour l'industrie de la construction. Vous pouvez également trouver Nilson sur les forums SitePoint en tant que mentor.