使用axios 的 cancelToken 取消重复请求
作者:互联网
let pending = []; //声明一个数组用于存储每个请求的取消函数和axios标识 let cancelToken = axios.CancelToken; let removePending = (config) => { for(let p in pending){ if(pending[p].u === config.url + JSON.stringify(config.data) + '&' + config.method) { //当当前请求在数组中存在时执行函数体 pending[p].f(); //执行取消操作 pending.splice(p, 1); } } } // http请求拦截器 axios.interceptors.request.use(config => {removePending(config) //在一个axios发送前执行一下取消操作 config.cancelToken = new cancelToken(c => {
// 这里的axios标识我是用请求地址&请求方式拼接的字符串,当然你可以选择其他的一些方式pending.push({ url: config.url + JSON.stringify(config.data) + '&' + config.method, f: c }) })
return Promise.resolve(config) }, error => { return Promise.reject(error) }) // http响应拦截器 axios.interceptors.response.use(data => { removePending(data.config); //在一个axios响应后再执行一下取消操作,把已经完成的请求从pending中移除 return Promise.resolve(data) }, error => {if (axios.isCancel(error)) { return Promise.reject(error); } else { return Promise.reject(error); }
//需要注意的是一定要区分是普通接口异常还是使用了取消函数
})
标签:axios,return,请求,data,cancelToken,error,config,pending 来源: https://www.cnblogs.com/MrSlow/p/15125490.html