在项目中使用CancelToken选择性取消Axios请求

Axios 提供了 CancelToken 类来创建取消标记。取消标记实际上是一个包含 token 标记和 cancel 方法的对象。

1、基本使用方法

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.');

 2、在项目中使用--选择性取消某个请求

可以通过CancalToken创建多个不同的source对象，来分别控制对应的请求

import axios from 'axios'
import service from "@/utils/request";

const CancelToken = axios.CancelToken;
const source1 = CancelToken.source();
const source2 = CancelToken.source();

export function clearApi1Fn() {// 用于取消第一个接口的请求
    source1.cancel('Operation canceled by the user.');
}
export function clearApi2Fn() {// 用于取消第二个接口的请求
    source2.cancel('Operation canceled by the user.');
}

export function getAllApi(params) {
    return service({
        url: '接口地址1',
        method: 'get',
        cancelToken: source1.token,// 在source1.cancel()调用时,会取消所有正在发送请求的当前接口
        params
    })
}
export function getPerpleListApi(params) {
    return service({
        url: '接口地址2',
        method: 'get',
        cancelToken: source2.token,
        params
    })
}