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

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

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

问题有两个部分。

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

第二部分是，如果 debounce 延迟小于 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);

这是一个演示。

从这个axios 问题（感谢zhuyifan2013提供解决方案），我发现axios timeout是response timeout而不是connection timeout。

请检查这个答案

您还可以将axios.defaults所有请求用作一般设置：

axios.defaults.timeout = 5000