使用axios 的 cancelToken 取消重複請求
阿新 • • 發佈:2021-08-10
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); } } }removePending(config) //在一個axios傳送前執行一下取消操作 config.cancelToken=newcancelToken(c=>{// http請求攔截器 axios.interceptors.request.use(config => {
// 這裡的axios標識我是用請求地址&請求方式拼接的字串,當然你可以選擇其他的一些方式
pending.push({url:config.url+JSON.stringify(config.data)+'&'+config.method,f:c})
})
return Promise.resolve(config) }, errorif(axios.isCancel(error)){ returnPromise.reject(error); }else{ returnPromise.reject(error); }=> { return Promise.reject(error) }) // http響應攔截器 axios.interceptors.response.use(data => { removePending(data.config); //在一個axios響應後再執行一下取消操作,把已經完成的請求從pending中移除 return Promise.resolve(data) }, error => {
//需要注意的是一定要區分是普通介面異常還是使用了取消函式
})