web-dev-qa-db-fra.com

Comment utiliser les intercepteurs axios?

J'ai vu la documentation d'axios, mais tout ce qu'il dit est

// 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 comprends pas très bien à quoi il sert. Quelqu'un peut-il me donner un exemple simple à suivre?.

javascriptaxios
16
Akash Salunkhe

Pour parler simplement, il s’agit plus d’un point de contrôle pour chaque action http. Chaque appel api effectué est passé par cet intercepteur.

Alors, pourquoi deux intercepteurs?

Un appel api est composé de deux moitiés, une demande et une réponse. Depuis, il se comporte comme un point de contrôle, la demande et la réponse ont des intercepteurs distincts.

Certains cas d'utilisation d'intercepteurs -

Supposons que vous souhaitiez vérifier avant de faire une demande, vos informations d'identification sont-elles valides? Ainsi, au lieu de passer un appel api, vous pouvez vérifier au niveau de l'intercepteur que vos informations d'identification sont valides.

Supposons que vous deviez attacher un jeton à chaque requête. Au lieu de dupliquer la logique d’ajout de jetons à chaque appel axios, vous pouvez créer un intercepteur qui associe un jeton à chaque requête.

Quelques cas d'utilisation d'intercepteurs de réponse -

Supposons que vous obteniez une réponse et que, d'après les réponses de l'API, vous voulez en 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 défini. reçu.

Supposons que vous avez demandé une API avec des informations d'identification valides, mais que vous n'avez pas le rôle valide pour accéder aux données. Vous pouvez donc déclencher une alerte de l'intercepteur de réponse indiquant que l'utilisateur n'est pas autorisé. De cette façon, vous serez sauvé de la gestion des erreurs non autorisées de l’API que vous auriez à exécuter à chaque demande axios que vous avez faite.

Pourrait proposer ces cas d'utilisation maintenant.

J'espère que cela t'aides :)

EDIT

Puisque cette réponse gagne du terrain, voici quelques exemples de code

L'intercepteur de requête

=> 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 on veut vérifier quels en-têtes sont passés/ajouter d'autres en-têtes génériques, il est disponible dans l'objet config.headers. Par exemple:

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

=> S'il s'agit d'une demande GET, les paramètres de requête envoyés peuvent être trouvés dans l'objet config.params.

L'intercepteur de réponse

=> Vous pouvez même facultatif analyser la réponse de l'API au niveau de l'intercepteur et transmettre la réponse analysée à la place de la réponse d'origine. Cela pourrait vous faire gagner du temps à l'écriture répétée de la logique d'analyse au cas où l'API est utilisé de la même manière à plusieurs endroits. Une façon de le faire est de passer un paramètre supplémentaire dans le api-request et d'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 un objet parse dans response.config, la manipulation est effectuée, pour le reste des cas, cela fonctionnera tel quel.

=> Vous pouvez même voir les codes HTTP arrivant et 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);
});
18
Aseem Upadhyay

C'est comme un middle-ware, en gros, il est ajouté à n'importe quelle requête (que ce soit GET, POST, PUT, DELETE) ou à n'importe quelle réponse (la réponse que vous obtenez du serveur). Il est souvent utilisé dans les cas où une autorisation est impliquée.

Regardez ceci: intercepteurs Axios et login asynchrone

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

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

6
Constantin Chirila