Question

我有一个输入字段，onChange它将我的输入字段值发送给API。因此，api将开始获取所有数据。但是当我再次输入时，我希望先前的请求被取消。

我正在使用axios发出请求，并尝试查看documentation，但我似乎无法弄清楚它是如何工作的，有人可以解释如何做到这一点吗？

这是我的函数，每个新输入都会调用该函数：

const onChange = (value) => {
  setTimeout(async() => {
    let result = []

    if (y === "keyword") result = await AutoSuggestionKeyword({
      value: value
    });
    
    else {
      const CancelToken = axios.CancelToken;
      const source = CancelToken.source();

      await axios.get(`https://${api_uri}/${value.toLowerCase()}`)
        .catch(function(thrown) {
          if (axios.isCancel(thrown)) {
            console.log('Request canceled', thrown.message);
          } else {
            // handle error
          }

        }).then(resp => {
          console.log(resp)
        });
      source.cancel();
    }
  }, 500)
}

Answer 1

您需要在请求中提供cancelToken，

axios.get(`https://${api_uri}/${value.toLowerCase()}`, {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }

});

Answer 2

~~我认为您无法取消HTTP请求~~，但是您可以将其包装在debounce函数中，debounce函数在调用回调或包装的函数之前要等待一段时间。传递下去。

您可以简单地用Google进行反跳操作，它将为您提供可使用的文章或npm软件包。

我认为此article也存在您要解决的相同问题

快乐编码

编辑1：是的，因此您可以取消http请求，请参见下面的评论

如何使用axios取消正在进行的GET请求

2 个答案: