axios实现多次发送请求取消之前的请求

axios实现多次发送请求取消之前的请求

定义三个按钮并在js中获取

const CancelToken = axios.CancelToken;
var cancel;
one.onclick = function(){
if(typeof cancel===‘function’){
cancel()
//判断上一次请求是否是一个函数，如果是一个函数的话就取消上一次请求（axios把取消请求的函数封装在了cancel中，每次点击按钮就会把cancel封装成一个函数）如果请求执行完成或者请求错误就把cancel设置成不是一个函数
（cancel = null）判断如果上一次没执行完的话就取消他
}
axios({
url:‘http://127.0.0.1:8005/server1’,
cancelToken: new CancelToken(function executor© {
// executor 函数接收一个 cancel 函数作为参数
cancel = c;
})
})
.then(function(a){
cancel = null
//执行完成把cancel设置成不是一个函数 （cancel = null）
console.log(a.data);
})
.catch(function(b){
if(axios.isCancel(b)){
//这句话的意思是如果是手动取消 axios是cancel axios是手动取消
//这里需要判断错误类型，一种是自己手动取消的一种是请求完成但是出现了错误下次再点击的时候就会判断这个函数是不是函数
//如果是自己手动取消的话这个请求没执行完让cancel是一个函数在下次点击的时候就会取消这个请求
//如果是出现了错误那就让cancel不是一个函数，因为这个请求已经执行完事了，再次点击的时候就不用管他了
console.log(‘手动取消’);
}
else{
cancel = null**//请求错误就把cancel设置成不是一个函数 （cancel = null）**
console.log(‘发送失败’);
}
})
}
//设置请求2的单击事件
two.onclick = function(){
if(typeof cancel===‘function’){
cancel()
}
axios({
url:‘http://127.0.0.1:8005/server2’,
cancelToken: new CancelToken(function executor© {
// executor 函数接收一个 cancel 函数作为参数
cancel = c;
})
})
.then(function(a){
cancel = null
console.log(a.data);
})
.catch(function(b){
if(axios.isCancel(b)){
cancel = null
console.log(‘手动取消’);
}
else{
cancel = null
console.log(‘发送失败’);
}
})
}
cancel.onclick = function(){
if(typeof cancel===‘function’){//这句话的意思是如果cancel是一个函数
cancel()
//如果是一个函数的话就取消这次请求 //也可能之没发送请求（没把cancel设置成一个函数）或者请求已经执行完成（上面已经把请求执行完成的cancel设置成不是一个函数） } else( alert(‘没有可取消的请求’) ) }