Axios取消令牌取消每个请求

Question

我正在尝试实现cancelToken API，这样每当我向服务器请求获取每个关键笔划的结果时，只有最后一个请求应该得到处理，但我已经实现了axios cancel token API，它似乎取消了每个请求，我在这里做错了什么？此函数在每次按键时都会被调用。

getProductLists2 = async () => {

let formData = new FormData()
const { start, limit } = this.state
formData.append('start', start)
formData.append('limit', limit)
formData.append('product_title', this.state.searchTitle)
formData.append('product_sku', this.state.searchSKU)
let cancel;
Axios({
method: 'POST',
url: BASE_URL + '/listProduct',
// headers: { 'Content-Type': 'multipart/form-data' },
data: formData,
cancelToken: new Axios.CancelToken(c => cancel = c)
})
.then(products => {
if (products && products.data.productList && products.data.productList.length > 0) {
this.setState({ productList: products.data.productList, totalProducts: products.data.productTotal })
}
})
.catch(err => toast.error('Something went wrong'))
console.log(cancel, 'h')
cancel && cancel()
}

Answer 1

在进行新的axios调用之前，您应该取消以前的cancelToken。当您提出第一个请求时，请保存cancelToken。然后，当你提出第二个请求时，检查是否已经有cancelToken并取消它，然后进行第二个axios调用。

取消getProductLists2以限制调用的速率可能也是一个好主意

我就是这样做的：

// Cancel the previous axios token if any
if (this.cancel) this.cancel.cancel();
// Get a new token
this.cancel = axios.CancelToken.source();
axios
.get(myURL, { cancelToken: this.cancel.token })
.then((res) => {
console.log(res.data);
})
.catch((error) => { console.log(error); });