关于javascript:axios使用拦截器取消重复的请求

因为接口响应速度等起因，在我的项目开发中常常须要解决反复点击导致屡次调用接口的问题，针对每个接口调用独自解决绝对繁琐，这里通过 axios 提供的拦截器实现对反复申请的对立拦挡解决。

import axios from 'axios'
import md5 from 'js-md5'
let pending = {};// 网络申请记录 map 构造
let CancelToken = axios.CancelToken;
// 增加申请拦截器
axios.interceptors.request.use(config => {
// 通过申请 url、method、params 字段生成每个申请惟一的 md5 值
let key = md5(`${config.url}&${config.method}&${JSON.stringify(config.data)}`);
  config.cancelToken = new CancelToken(c => {if(pending[key]) {if(Date.now() - pending[key] > 5000) {
        // 同一个申请再次发动时距上次申请工夫超过 5s，删除对应的申请记录，从新发动申请，工夫依据理论状况调整
        delete pending[key];
      } else {
        // 5s 以内的已发动申请，勾销反复发送申请
        c('repeated');
      }
    }
    // 记录以后的申请，如果是进行中的申请则更新标记工夫戳
    pending[key] = Date.now();});
}, error => {return Promise.reject(error);
});

// 增加响应拦挡

axios.interceptors.response.use(res => {let key = md5(`${res.config.url.replace(/.*\/api/, '')}&${res.config.method}&${res.config.data}`);
  if(pending[key]) {
    // 申请响应实现，删除对应的申请记录
    delete pending[key];
  }
  return res;
}, err => {if(err.message !== 'repeated') {
    // 非勾销反复申请的报错，给出谬误提醒
    let content = '零碎谬误！';
    if(window.navigator.onLine) {if(/timeout/.test(err)) {content = '申请超时！';}
    } else {content = '网络异样！';}
    alert(content);
  }
  return Promise.reject(err);
})