Axios 超时在有限热点上无法按预期工作答案

【问题标题】：Axios timeout not working as expected on limited hotspotAxios 超时在有限热点上无法按预期工作
【发布时间】：2021-02-22 11:26:27
【问题描述】：

我将 axios 用于我的一个 react native 项目。这是我的配置和执行代码：

const config = {
    method: 'GET',
    headers: {
        'Content-Type': 'application/json',
        Accept: 'application/json',
    },
    timeout: 30000
};
var response = await instance.get(route, config);

这是我的测试场景。我有两部手机，A 和 B。我从手机 A 打开我的 wifi 并创建一个热点。从电话 B 我连接到那个热点。现在我打开手机A上的wifi，它有热点。对于电话 B，网络可用，但显示为受限。

现在，如果我使用上述 axios 配置放置 HTTP，对于 Android 设备，它在 30 秒后永远不会超时。但对于 iOS 设备，它按预期工作。为什么？

【问题讨论】：

标签： android ios react-native axios

【解决方案1】：

它发生在我身上，我通过执行以下操作手动解决了它

   let source = axios.CancelToken.source();
    setTimeout(() => {
      source.cancel();
      // Timeout Logic
    }, 30000);
   const config = {
       method: 'GET',
       headers: {
       'Content-Type': 'application/json',
       Accept: 'application/json',
   },
   timeout: 30000,
   //Add this
   cancelToken: source.token,

 };

【讨论】：

请注意，自 Axios v0.22.0 起，CancelToken 已被弃用。 axios-http.com/docs/cancellation

【解决方案2】：

我在使用 Hassan 的解决方案时遇到的问题是，即使请求确实被取消了，我也使用相同的令牌来取消所有请求，所以之后每个请求都被立即取消，甚至没有尝试。这破坏了我的应用程序。

我使用请求拦截器解决了这个问题：

const myInstance = axios.create(config);

const myTimeoutLimit = 15000;

const guaranteeTimeout = (config) => {
    config.cancelToken = new axios.CancelToken((cancelRequest) => {
        setTimeout(() => cancelRequest('Optional message'), 
        myTimeoutLimit);
    });
    return config;
};

myInstance.interceptors.request.use(guaranteeTimeout);

因此，您基本上为每个请求创建一个新令牌，如果请求超过您定义的限制，我们将取消该特定请求。

Axios documentation

【讨论】：