出现这个问题的原因是因为,使用一个cancelToken去取消多个请求时,会导致一些奇怪的行为。比如,第一个请求被取消但是第二个请求却不被取消。
解决这个问题的方法是,每个请求使用独立的cancelToken,而不是多个请求共用一个cancelToken。
下面是一个使用独立cancelToken的示例代码:
const axios = require('axios');
const requests = [
{ url: 'https://jsonplaceholder.typicode.com/posts/1', cancelToken: axios.CancelToken.source().token },
{ url: 'https://jsonplaceholder.typicode.com/posts/2', cancelToken: axios.CancelToken.source().token },
{ url: 'https://jsonplaceholder.typicode.com/posts/3', cancelToken: axios.CancelToken.source().token }
];
axios.all(requests.map(r => axios.get(r.url, { cancelToken: r.cancelToken })))
.then(axios.spread((...responses) => {
console.log(responses);
}))
.catch(error => {
if (axios.isCancel(error)) {
console.log('Request canceled');
} else {
console.log(error);
}
});
在上面的代码中,每个请求都有独立的cancelToken,这样就能够正确的取消每个请求,而不会出现奇怪的行为。