关于reactjs：Axios正在某种程度上缓存我的get用户请求react native


Axios is caching somehow my get user request react native

我正在使用Axios ("axios":"^0.19.0")向我的后端发出GET请求，该请求的工作方式与我已经通过通过Postman macOS应用程序发送相同的令牌来测试它的后端一样，并返回了正确的用户对象。

但是从我的React Native应用程序中，每当我执行get请求并传递相同的承载令牌时，我都会得到我作为响应登录的最后一个用户。

这是我发送请求的方式：

1
2
3
4
5
6
7
8
9
10
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');
    },

setHeaders方法用于设置请求的标头，我将所有http方法重置为一个空对象，并为以下请求设置正确的键值。

1
2
3
4
5
6
7
8
9
10
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;
    });
}

如您所见，我什至尝试使用Cache-Control：无缓存，但仍然无缘无故地保持缓存。

这就是我从AuthView.js

调用此函数的方式

1
2
3
4
5
6
7
8
9
10
11
 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();
            });
        });

为什么会这样？

谢谢。

相关讨论

问题似乎是在实际设置标头之前已发送请求。原因是setHeader内部依赖于在实际设置头之前触发的回调，并且没有钩子来允许调用代码在触发请求之前等待该代码完成。

它是可修复的，但使setHeader返回Promise并使用config对象

进行解析

1
2
3
4
5
6
7
8
9
10
11
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);
    });
  });
}

然后在getUserByToken，await标头

中

1
2
3
4
5
6
7
8
9
10
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');
}
相关讨论

请检查以下代码，我已经在我的项目中对其进行过测试，并且可以正常工作。

1
2
3
4
5
6
7
8
9
10
getUserByToken: function(token) {
        var headers = [
            { key: 'Authorization', value: 'Bearer ' + token},
            { key: 'Content-Type', value: 'application/x-www-form-urlencoded'},
            { key: 'Cache-Control', value: 'no-store'}
        ];

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

使用与上面相同的代码，它将解决您的问题。