axios拦截器实现多次发送请求取消之前的请求
如果单纯用取消请求发送请求每一个请求下面都要写一样的代码，使用拦截器可以只写一段代码就实现这个操作
拦截器部分
单击事件
const CancelToken = axios.CancelToken;
var cancel;
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
if(typeof cancel===‘function’){ //在发送请求之前先判断上一个请求的cancel是不是一个函数 是的话就说明上一次请求没有执行完成所以取消上一次请求
cancel()
}
//给参数config添加一个属性
config.cancelToken= new CancelToken(function executor(c ) {//这里要封装cancel函数config只是一个参数所以给他配置一个（注意格式把：换成=）
// executor 函数接收一个 cancel 函数作为参数
cancel = c;
})
return config;
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
if(axios.isCancel(b)){ //只要把取消请求需要判断的两种情况复制粘贴一下就行了
console.log(‘手动取消’);
}
else{
cancel = null
console.log(‘发送失败’);
}
return Promise.reject(error);
});
//以上是拦截器
//一下是单击事件
//设置请求1的单击事件
one.onclick = function(){
axios({
url:‘http://127.0.0.1:8005/server1’,
})
.then(function(a){
console.log(a.data);
})
.catch(function(b){
})
}
//设置请求2的单击事件
two.onclick = function(){
axios({
url:‘http://127.0.0.1:8005/server2’,
})
.then(function(a){
console.log(a.data);
})
.catch(function(b){
})
}
cancel.onclick = function(){
if(typeof cancel===‘function’){
cancel()
}
else(
alert(‘没有可取消的请求’)
)
}
只要把取消请求的内容对号入座就行了
在请求拦截去那判断上一次请求的cancel是否为一个函数并且封装cancel
在响应拦截器的错误回调哪里设置错误类型的判读（是否是自己手动取消请求产生的判断）