Axios 请求超时答案

【问题标题】：Timeout on Axios RequestsAxios 请求超时
【发布时间】：2019-02-21 21:14:10
【问题描述】：

我们的网站目前具有过滤功能，可根据过滤内容通过 axios 获取新数据。

问题是过滤器是实时完成的，并且通过 react 进行的每个更改都会导致 axios 请求。

有没有办法让 axios 请求超时，以便我只获取最后一个状态？

【问题讨论】：

使用去抖？

标签： reactjs timeout axios

【解决方案1】：

我建议在这种情况下使用debounce 在指定毫秒的用户输入后触发 API 调用。

但是以防万一您需要在axios 调用期间添加超时，这可以像这样实现 -

instance.get('/longRequest', {
  timeout: 5000
});

【讨论】：

【解决方案2】：

这个问题有两个部分。

第一部分是去抖动，是可以经常触发的事件侦听器的默认设置，尤其是当它们的调用代价高昂或可能导致不良影响时。 HTTP 请求属于这一类。

第二部分是，如果去抖动延迟小于 HTTP 请求持续时间（对于虚拟的每种情况都是如此），仍然会有竞争的请求，响应会随着时间的推移导致状态变化，而且不一定是正确的顺序。

第一部分使用 debounce 功能来减少竞争请求的数量，第二部分使用 Axios cancellation API 在有新请求时取消未完成的请求，例如：

  onChange = e => {
    this.fetchData(e.target.value);
  };

  fetchData = debounce(query => {
    if (this._fetchDataCancellation) {
      this._fetchDataCancellation.cancel();
    }

    this._fetchDataCancellation = CancelToken.source();

    axios.get(url, {
      cancelToken: this._fetchDataCancellation.token
    })
    .then(({ data }) => {
      this.setState({ data });
    })
    .catch(err => {
      // request was cancelled, not a real error
      if (axios.isCancel(err))
        return;

      console.error(err);
    });
  }, 200);

这是demo。

【讨论】：

【解决方案3】：

从这个axios issue（感谢zhuyifan2013提供解决方案），我发现axiostimeout是响应超时 不是连接超时。

请查看this answer

【讨论】：

【解决方案4】：

您还可以将axios.defaults 用作所有请求的常规设置：

axios.defaults.timeout = 5000

【讨论】：