axios二次封装取消请求

记录一次关于axios取消请求,防止请求没有完成之后，再次请求同一个接口，导致数据加载过慢。（编辑摘要凑字...）

import axios from 'axios'
let cancelToken=axios.CancelToken;

//用于存储请求的地址
let pending=[];
//定义取消重复请求的方法
let cancelPending=(config)=>{
  pending.forEach((item,index)=>{
    if(config){
      if(item.path==config.url){
        item.Cancel();
        pending.splice(index,1)
      }
    }  
  })
}

//axios实例配置
const instance=axios.create({
  baseURL:'xxxx',
  timeout:5000
})

//请求拦截器
instance.interceptors.request.use((config)=>{
    const token=getToken('token') || '';
    if(token){
      config.headers.token=token
    }
    //调用方法
    cancelPending(config);
    //new axios.CancelToken实例
    config.cancelToken=new cancelToken((res)=>{
      pending.push({path:config.url,Cancel:res})
    })
    return config
})

//响应拦截器
instance.interceptors.response.use((response)=>{
  cancelPending(response.config);
  return response.data;
},(error)=>{
  if(error.message=='canceled'){
    return false
  }
  return Promise.reject(error)
})

export default instance