axios使用cancel取消请求
提供了两种取消请求的方法: AbortController
和 CancelToken
官方文档: https://www.axios-http.cn/docs/cancellation
AbortController
const controller = new AbortController();
axios.get('/foo/bar', {
signal: controller.signal
}).then(function(response) {
//...
});
// 取消请求
controller.abort()
只支持
v0.22.0
及之后的版本使用
CancelToken
CancelToken
是一个生成令牌的函数,你可以调用它来获取一个cancel
函数和一个promise
。你可以在任何地方调用cancel
函数来取消请求,而promise
会在请求被取消时解决。
import axios from "axios";
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get('/user/12345', {
cancelToken: source.token
}).catch(function (thrown) {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
// 处理错误
}
});
axios.post('/user/12345', {
name: 'new name'
}, {
cancelToken: source.token
})
// 取消请求(message 参数是可选的)
source.cancel('Operation canceled by the user.');
也可以通过传递一个 executor 函数到 CancelToken 的构造函数来创建一个 cancel token:
const CancelToken = axios.CancelToken;
let cancel;
axios.get('/user/12345', {
cancelToken: new CancelToken(function executor(c) {
// executor 函数接收一个 cancel 函数作为参数
cancel = c;
})
});
// 取消请求
cancel();
注意: 可以使用同一个 cancel token 或 signal 取消多个请求。
取消之后再次发送请求提示被cancel解决办法
如果在 axios 中取消了一个请求,那么再次发送同样的请求也会取消请求。这是因为 axios 同样的请求已经被 cancel ,因此无法再次发送。如果需要再次发送同样的请求,需要重新创建一个新的 cancelToken ,否则会一直提示被取消。
import axios from "axios";
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
let cancelToken = axios.CancelToken;
let cancel;
cancelToken.source = function source() {
var token = new cancelToken(function executor(c) {
cancel = c; // executor 接受一个 cancel 函数作为参数
});
return {
token: token,
cancel: cancel
};
};
const source = cancelToken.source();
//HTTPrequest拦截
axios.interceptors.request.use(
function (config) {
config.cancelToken = source.token; // 全局添加cancelToken
if (typeof cancel === 'function') { // 重新创建 cancelToken
config.cancelToken = new cancelToken(function executor(c) {
cancel = c;
});
}
return config;
}
)
//HTTPresponse拦截
axios.interceptors.response.use(
(response) => {
return response;
},
(error) => {
const res = error.response || {};
if (res.status === 478) {
// 取消请求(message 参数是可选的)
source.cancel('登录信息已过期');
}
}
)
总结
我们首先通过 CancelToken.source()
创建了一个可以取消请求的源。然后,在发送请求时,我们通过 cancelToken
选项将取消令牌传递给请求。如果需要取消请求,我们调用source.cancel()
方法,它会引发一个错误,你可以在catch块中捕获这个错误以决定如何处理。如果后续需要再次发送同样的请求,需要重新创建一个新的 cancelToken
,否则会一直提示被取消。