Axios 请求超时

Question

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

问题在于过滤器是实时完成的，并且通过 React 所做的每个更改都会导致 axios 请求。

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

Answer 1

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

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

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

Answer 2

问题有两个部分。

第一部分是去抖动，对于经常触发的事件侦听器来说是默认的，特别是当它们的调用成本高昂或可能导致不良影响时。HTTP 请求属于这一类。

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

第一部分使用 debounce 函数来减少竞争请求的数量，第二部分使用 Axios取消 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);

这是一个演示。