axios取消请求

基本概念和原理

在 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 参数

注意

取消标记只能取消尚未完成的请求，无法取消已经完成的请求。
取消标记只能在特定的请求上使用一次，一旦使用过，就需要重新创建