基本概念和原理
在 Axios 中,取消请求的基本思路是创建一个用于取消的标记(cancel token),并将其与特定请求关联。当调用取消令牌的 cancel
方法时,Axios 会触发中止底层的网络请求,从而终止正在进行的请求过程
axios v0.22.0之后支持AbortController取消请求 取消请求 | Axios中文文档 | Axios中文网
CancelToken使用:
1.创建 CancelToken 对象: 在发起请求之前,可以通过 axios.CancelToken.source() 方法创建一个 CancelToken 对象,并获取其中的 token。这个 token 是一个用于标识该请求的令牌。
2.关联 CancelToken: 将创建的 CancelToken 对象中的 token 关联到请求的配置中,通过 cancelToken 参数。这告诉 Axios 在取消令牌触发时要取消这个请求。
3.取消请求: 当想要取消请求时,调用 CancelToken 对象中的 cancel 方法,并提供一个取消的原因。这会触发 Axios 内部的逻辑,导致底层的网络请求被中止。
4.捕获取消错误: 如果请求在取消前已经发出,Axios 会抛出一个名为 Cancel 的错误。可以使用 axios.isCancel(error) 来检查是否是取消错误。在 .catch 部分处理这个取消错误。
Demo场景:弹框里面有同步数据的接口,如果接口没请求完,用户关闭弹框,则取消请求。
// 创建取消令牌
let cancelTokenSource: any = null;
//定义请求的状态
const isApiRequestPending = ref(false);
//开始同步的方法
const handleOk = () =>{
//可以理解为给定每个接口一个标识
cancelTokenSource = axios.CancelToken.source();
isApiRequestPending.value = true;
let params = {}
//请求接口
UpdateSqlserver(params, {
cancelToken: cancelTokenSource.token,
})
.then(res => {
console.log(success);
})
.catch(error => {
if (axios.isCancel(error)) {
console.log(error.message);
} else {
console.log(error.message);
}
})
.finally(() => {
// 设置请求状态为非 pending
isApiRequestPending.value = false;
});
}
//关闭弹框事件
const handleCancel = () =>{
modalRenewRt.showDia = false;
if (isApiRequestPending.value) {
cancelTokenSource.cancel('取消请求');
}
}
AbortController 使用
const controller = new AbortController();
axios.get('/foo/bar', {
signal: controller.signal
}).then(function(response) {
//...
});
// 取消请求
controller.abort()
取消多个请求 可以使用同一个 cancel token 或 signal 取消多个请求。
const controller = new AbortController();
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get('/user/12345', {
cancelToken: source.token,
signal: controller.signal
}).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.');
// 或
controller.abort(); // 不支持 message 参数
注意
取消标记只能取消尚未完成的请求,无法取消已经完成的请求。
取消标记只能在特定的请求上使用一次,一旦使用过,就需要重新创建