Comment utiliser les intercepteurs axios ?

Question

J'ai vu la documentation d'Axios, mais tout ce qu'elle dit est que

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
  // Do something with response data
  return response;
}, function (error) {
  // Do something with response error
  return Promise.reject(error);
});

De plus, de nombreux tutoriels ne montrent que ce code mais je ne sais pas à quoi il sert. Quelqu'un peut-il me donner un exemple simple à suivre ?

Answer 1

Pour parler en termes simples, il s'agit plutôt d'un point de contrôle pour chaque action HTTP. Chaque appel d'API qui a été fait, est passé par cet intercepteur.

Alors, pourquoi deux intercepteurs ?

Un appel d'API est composé de deux parties, une demande et une réponse. Comme il se comporte comme un point de contrôle, la demande et la réponse ont des intercepteurs séparés.

Quelques cas d'utilisation de l'intercepteur de requête -

Supposons que vous vouliez vérifier avant de faire une demande si vos informations d'identification sont valides. Ainsi, au lieu de faire un appel à l'API, vous pouvez vérifier au niveau de l'intercepteur que vos informations d'identification sont valides.

Supposons que vous ayez besoin d'attacher un jeton à chaque requête, au lieu de dupliquer la logique d'ajout de jeton à chaque appel Axios, vous pouvez créer un intercepteur qui attache un jeton à chaque requête effectuée.

Quelques cas d'utilisation de l'intercepteur de réponse -

Supposons que vous ayez reçu une réponse et que, d'après les réponses de l'API, vous vouliez déduire que l'utilisateur est connecté. Ainsi, dans l'intercepteur de réponse, vous pouvez initialiser une classe qui gère l'état de connexion de l'utilisateur et la mettre à jour en conséquence sur l'objet de réponse que vous avez reçu.

Supposons que vous ayez demandé une certaine API avec des informations d'identification valides, mais que vous n'ayez pas le rôle valide pour accéder aux données. Vous pouvez donc déclencher une alerte à partir de l'intercepteur de réponse indiquant que l'utilisateur n'est pas autorisé. De cette façon, vous serez épargné de la gestion des erreurs d'API non autorisées que vous auriez dû effectuer sur chaque requête Axios que vous avez faite.

Voici quelques exemples de code

L'intercepteur de requêtes

• On peut imprimer l'objet de configuration d'axios (si besoin est) en faisant (dans ce cas, en vérifiant la variable d'environnement) :

  const DEBUG = process.env.NODE_ENV === "development";
  
  axios.interceptors.request.use((config) => {
      /** In dev, intercepts request and logs it into console for dev */
      if (DEBUG) { console.info(" ", config); }
      return config;
  }, (error) => {
      if (DEBUG) { console.error(" ", error); }
      return Promise.reject(error);
  });

• Si l'on veut vérifier quels en-têtes sont passés/ajoutez d'autres en-têtes génériques, c'est disponible dans le fichier config.headers objet. Par exemple :

  axios.interceptors.request.use((config) => {
      config.headers.genericKey = "someGenericValue";
      return config;
  }, (error) => {
      return Promise.reject(error);
  });

• Au cas où il s'agirait d'un GET les paramètres de la requête envoyée peuvent être trouvés dans la section config.params objet.

L'intercepteur de réponse

• Vous pouvez même éventuellement analyser la réponse de l'API au niveau de l'intercepteur et transmettre la réponse analysée au lieu de la réponse originale. Cela peut vous épargner le temps d'écrire la logique d'analyse encore et encore dans le cas où l'API est utilisée de la même manière à plusieurs endroits. Une façon de le faire est de passer un paramètre supplémentaire dans la méthode d'interception de l api-request et utiliser le même paramètre dans l'intercepteur de réponse pour effectuer votre action. Par exemple :

  //Assume we pass an extra parameter "parse: true" 
  axios.get("/city-list", { parse: true });

  Une fois, dans l'intercepteur de réponse, nous pouvons l'utiliser comme :

  axios.interceptors.response.use((response) => {
      if (response.config.parse) {
          //perform the manipulation here and change the response object
      }
      return response;
  }, (error) => {
      return Promise.reject(error.message);
  });

  Donc, dans ce cas, chaque fois qu'il y a une parse objet dans response.config la manipulation est faite, pour le reste des cas, il fonctionnera tel quel.

• Vous pouvez même voir l'arrivée HTTP et ensuite prendre la décision. Par exemple :

  axios.interceptors.response.use((response) => {
      if(response.status === 401) {
           alert("You are not authorized");
      }
      return response;
  }, (error) => {
      if (error.response && error.response.data) {
          return Promise.reject(error.response.data);
      }
      return Promise.reject(error.message);
  });

Answer 2

Vous pouvez utiliser ce code, par exemple, si vous voulez saisir le temps qui s'écoule entre le moment où la demande a été envoyée et le moment où vous avez reçu la réponse :

const axios = require("axios");

(async () => {
  axios.interceptors.request.use(
    function (req) {
      req.time = { startTime: new Date() };
      return req;
    },
    (err) => {
      return Promise.reject(err);
    }
  );

  axios.interceptors.response.use(
    function (res) {
      res.config.time.endTime = new Date();
      res.duration =
        res.config.time.endTime - res.config.time.startTime;
      return res;
    },
    (err) => {
      return Promise.reject(err);
    }
  );

  axios
    .get("http://localhost:3000")
    .then((res) => {
      console.log(res.duration)
    })
    .catch((err) => {
      console.log(err);
    });
})();

Answer 3

Il s'agit d'un intergiciel, qui est ajouté à toute demande (qu'il s'agisse de GET, POST, PUT, DELETE) ou à toute réponse (celle que vous recevez du serveur). Il est souvent utilisé dans les cas où l'autorisation est impliquée.

Jetez un coup d'oeil à ça : Intercepteurs Axios et connexion asynchrone

Voici un autre article à ce sujet, avec un exemple différent : https://medium.com/@danielalvidrez/handling-error-responses-with-grace-b6fd3c5886f0

L'essentiel de l'un des exemples est que vous pouvez utiliser l'intercepteur pour détecter si votre jeton d'autorisation a expiré (si vous obtenez 403 par exemple) et rediriger la page.

Answer 4

Que dites-vous de ça ? Vous créez une nouvelle instance d'Axios et vous lui attachez un intercepteur. Vous pouvez ensuite utiliser cet intercepteur n'importe où dans votre application.

export const axiosAuth = axios.create()

//we intercept every requests 
axiosAuth.interceptors.request.use(async function(config){
    //anything you want to attach to the requests such as token 
    return config;
}, error => {
    return Promise.reject(error)
})

//we intercept every response
axiosAuth.interceptors.request.use(async function(config){

    return config;
}, error => {
//check for authentication or anything like that
    return Promise.reject(error)
})

Ensuite, vous utilisez axiosAuth de la même manière que vous utilisez axios