axios封装之避免重复url请求

用途

由于用户连续点击某个按钮或请求某个列表数据，导致同一个请求url进行多次http请求，数据是一样的，浪费不必要的性能，所以在axios中进行请求判断拦截吊

实现方法

• 使用 axios 中的 CancelToken 进行取消请求
• 使用 Es6 中的 Map 进行数据判断处理
• 在 axios 中进行 request 请求拦截

具体代码

第一步：在axios文件中 new 一个 map 对象

因为

const pending = new Map();

第二步：写一个添加方法

//接收两个参数，一个请求的config和一个请求的ul
const addPending = (config:any, url: string) => {
  config.cancelToken = config.cancelToken || new axios.CancelToken(cancel=>{
    if(!pending.has(url)){
    	//向map对象中添加对象，key就是我们的url，value就是cancel
        pending.set(url,cancel)
    }
  })
};

第三步：写一个删除方法

const removePeding = (url: string) => {
  if(pending.has(url)){//判断当前url是否已经在请求
    const cancel = pending.get(url);//拿到cancelToken方法
    cancel(url);//取消请求
    pending.delete(url);//在map对象中删除本次重复请求
  }
}

第四步：对请求进行拦截

axios.interceptors.request.use( (config: any) => {
  const url = [
    config.method,
    config.url,
    JSON.stringify(config.params),
    JSON.stringify(config.data)
  ].join("&");//生成url
    removePeding(url);//判断是否存在请求，有进行取消
    addPending(config,url);//进行添加
  
}, (error: any) => {
  return Promise.reject(error);
});

至此我们的需求就实现了，疯狂点击一个事件去请求一个接口，不会造成重复请求了