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

})

}

文章链接

 您阅读本篇文章共花了：