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

Question

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

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

这是我的 function ，每个新输入都会调用它：

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

I don't think you can cancel an HTTP request , but what you can do is wrap it in debounce function, debounce function wait for a certain time before calling the callback or function you wrap or pass on it.

您可以简单地 google debounce，它会为您提供可以使用的文章或 npm 包。

我认为这篇文章也有您要解决的相同问题

快乐编码

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