Axios 以某种方式缓存我的获取用户请求本机反应

Posted 2023-02-22

【中文标题】Axios 以某种方式缓存我的获取用户请求本机反应

【英文标题】：Axios is caching somehow my get user request react native

【发布时间】：2019-11-23 05:52:33

【问题描述】：

我正在使用 Axios ("axios": "^0.19.0") 向我的后端发出 GET 请求，因为我已经通过 Postman macOS 应用程序发送相同的令牌对其进行了测试，并返回正确的用户对象。

但在我的 React Native 应用程序中，每当我发出 get 请求并传递相同的不记名令牌时，我都会得到我作为响应登录的最后一个用户。

这就是我发送请求的方式：

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 方法重置为空对象并为以下请求设置正确的键值。

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: no-cache 但仍然无缘无故地保持缓存。

这就是我从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();
            );
        );

为什么会发生这种情况？

谢谢。

【问题讨论】：

是否检查了开发控制台中的网络选项卡是否请求进行？

@Tapas 好的，所以看起来这可能是 Axios 的问题......即使我正在传递新令牌，Reactotron 中的请求对象是以前的令牌！ wtf这很奇怪。

哦，我想我知道为什么了！！！你看到那里的 setHeader 了吗？它有点异步，所以有时它会在设置或完成设置新标头之前先发送 http 请求，我需要用 Promise 来做到这一点。

@msqar 是的，这里的问题是setHeaders 中的代码，发生了一个回调，您在发送请求之前没有等待确认 - 即使它是同步的，回调仍然会运行在请求结束后

@James 是的，你能帮我改进一下吗？

【参考方案1】：

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

虽然可以修复，但让 setHeader 返回 Promise 并使用 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);
    );
  );

然后在getUserByToken、await 中标头

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');

【讨论】：

试图找出为什么即使 promise 似乎被正确编码，但它不起作用。调试atm。

无法使其工作，但似乎我可以通过像这样直接设置它们来使其工作：props.forEach((prop) => AxiosInstance.defaults.headers.common[prop.键] = prop.value; );

不，没有错误，但从未进入 AxiosInstance.interceptors.request.use() 函数，不知道为什么，尝试了很多东西，但没有成功。所以我最终直接设置它们。

@msqar 好吧，如果有一种不需要回调的直接设置方法，那显然更好:)

我也得到了缓存/旧响应。在 James 回答的帮助下，我做到了：axios.get("API", headers: "Cache-Control": "no-cache " );它奏效了。

【参考方案2】：

请检查下面的代码，我已经在我的项目中测试过，它工作正常。

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');
    ,

使用上面相同的代码它会解决你的问题。