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

Question

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

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

这是我的函数，它被每个新输入调用：

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请求，但你可以做的是把它包装在去抖动函数中，去抖动函数等待一段时间，然后再调用你包装或传递它的回调或函数。

你可以简单地谷歌去反弹，它会给你可以使用的文章或npm包。

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

快乐编码

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