1. 程式人生 > 其它 >使用axios 的 cancelToken 取消重複請求

使用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=newcancelToken(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)){ returnPromise.reject(error); }else{ returnPromise.reject(error); }
})