关于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);})