Question

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

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

是否有办法在axios请求上设置超时，以便我仅获取最后一个状态？

Answer 1

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

但是，以防万一您需要在axios通话期间添加超时的情况，可以通过-

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

Answer 2

问题有两个部分。

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

第二部分是，如果防抖动延迟小于HTTP请求持续时间（对于虚拟情况，这是正确的），则仍然会有竞争的请求，响应将导致状态随时间变化，并且不一定以正确的顺序进行。

第一部分使用反跳功能处理，以减少竞争请求的数量，第二部分使用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。

Answer 3

通过此axios issue（感谢 zhuyifan2013 提供解决方案），我发现 axios timeout是响应超时而不是连接超时。

请检查this answer

Answer 4

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

axios.defaults.timeout = 5000

Axios请求超时

4 个答案: