web-dev-qa-db-fra.com

Axios est la mise en cache d'une manière ou d'une autre ma demande d'utilisateur réactive

J'utilise Axios ("axios": "^0.19.0") Pour faire une demande d'obtention de mon backend qui fonctionne comme je l'ai déjà testé en envoyant le même jeton via Postman MacOS App et renvoie l'objet utilisateur correct.

Mais de mon application native React, chaque fois que je fais la demande d'obtention et que je passe le même jeton au porteur, je reçois le dernier utilisateur que j'ai connecté comme réponse.

Voici comment j'envoie la demande:

getUserByToken: function(token) {
        var headers = [
            { key: 'Authorization', value: 'Bearer ' + token},
            { key: 'Content-Type', value: 'application/x-www-form-urlencoded'},
            { key: 'Cache-Control', value: 'no-cache'}
        ];

        setHeaders('get', headers);
        return AxiosInstance.get('/user');
    },

La méthode de Setheaders est utilisée pour définir les en-têtes sur la demande, j'ai réinitialisé toutes les méthodes HTTP à un objet vide et définir les valeurs de clé appropriées pour la demande suivante.

export const setHeaders = (type, props) => {
    AxiosInstance.interceptors.request.use(config => {
        config.headers[type] = {};

        props.forEach((prop) => {
            config.headers[type][prop.key] = prop.value;
        });
        return config;
    });
}

Comme vous pouvez le constater, j'ai même essayé d'utiliser le contrôle du cache: No-cache mais toujours, continue de mettre la mise en cache sans raison.

Voici comment j'appelle cette fonction de mon AuthView.js

 UserServices.getUserByToken(loginData.access_token)
        .then(userResponse => {
   // here userResponse is the previous user! 
   // even though i'm passing the correct token
            this.props.onSetUserInfo(userResponse.data);
            this.setState({
                loading: false
            }, () => {
                startMainTabs();
            });
        });

Pourquoi cela pourrait-il se passer?

Merci.

reactjsreact-nativeaxios
8
msqar

Le problème semble être que la demande est envoyée avant la définition de l'en-tête. La raison en est que setHeader repose en interne repose sur un rappel pour tirer avant de définir l'en-tête, et il n'y a pas de crochet pour permettre au code d'appel d'attendre que ce code ait terminé avant de tirer la demande.

C'est réparable cependant, make setHeader renvoie un Promise et résoudre avec l'objet config

export const setHeaders = (type, props) => {
  return new Promise(resolve => {
    AxiosInstance.interceptors.request.use(config => {
      config.headers[type] = {};
      props.forEach((prop) => {
        config.headers[type][prop.key] = prop.value;
      });
      return resolve(config);
    });
  });
}

Puis dans getUserByToken, await l'en-tête

getUserByToken: async function (token) {
  var headers = [
    { key: 'Authorization', value: 'Bearer ' + token},
    { key: 'Content-Type', value: 'application/x-www-form-urlencoded'},
    { key: 'Cache-Control', value: 'no-cache'}
  ];

  await setHeaders('get', headers);
  return AxiosInstance.get('/user');
}
3
James