因业务需求，需要请求多次同一接口，需要在请求接口时，取消上个未完成的接口请求
解决方案一：统一封装
1. 可以利用CancelToken工厂函数创建cancel token
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
// get 方法使用案例
axios.get(‘user/12345‘, {
cancelToken: source.token
}).catch(function(thrown) {
if (axios.isCancel(thrown)) {
console.log(‘Request canceled‘, thrown.message)
} else {
// TODO: handle error
}
})
// post 使用案例
axios.post(‘/user/12345‘, {
name: ‘name what‘
}, {
cancelToken: source.token
})
// 执行取消请求操作
source.cancel(‘请求已取消’)
解决方案二：单个接口处理
1、api处理
export function getSelfCollectionResourceList(data,_this) {
return request({
url: "/xxxx/xxx/xxxx",
method: "POST",
data,
cancelToken: new axios.CancelToken((c) => {
_this.cancelFun = c
}),
});
}
2、vue调用处理
export default {
data(){
return {
cancelFun :null,
}
},
method:{
cancelRequest() {
if (typeof this.cancelFun === ‘function‘) {
this.cancelFun()
}
},
getSelfCollectionResource() {
this.cancelRequest();
getSelfCollectionResourceList({
xxx:xxxx
},this).then(res => {
this.total = res.result.totalNum;
this.resList = res.result.list;
});
},
}
}
问题，按照上述写法，并未出现pending状态的接口请求
参考：https://www.jianshu.com/p/1662e2524c64