在项目中使用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})
}