axios+vue防止点击提交按钮而发送多次请求

问题：如图，当我连续点击提交按钮多次，后台会接收到多次数据。

image.png
在网上找了下方法，结合自己实际的问题，解决如下（参考文章：https://www.jianshu.com/p/4445595488e2）

  let pending = []; //声明一个数组用于存储每个ajax请求的取消函数和ajax标识
  let cancelToken = axios.CancelToken;//初始化取消请求的构造函数
  let arr=[]//区分是请求还是响应的头部
  let removePending = (config,f) => {
      arr=config.url.split(window.g.apiUrl);
      arr=arr[arr.length-1]
      let flagUrl = arr + '&' + config.method
      if(pending.indexOf(flagUrl)!==-1){
        if(f){
          f()
        }else{     
          pending.splice(pending.indexOf(flagUrl), 1)
        }
     }else{
        if(f){
         pending.push(flagUrl)
     }
  } 
 }
//添加请求拦截器
axios.interceptors.request.use(config=>{
  if(config.method==='post'){
     config.cancelToken = new cancelToken((c)=>{
     removePending(config,c); 
  });
}
return config;
},error => {
return Promise.reject(error);
});

axios.interceptors.response.use(response=> {
 if (response.config.method === 'post') {
   removePending(response.config)
 }
 }）

注释：1、文章说的很清楚，但是有一个问题，就是我的config.url的路径在request和response里面不一样，我用到了baseUrl，所以用了一个arr来处理了config.url。
2、做完了之后你还需要配合自己的代码做一定的处理，如果在响应完成，还在点击（因为这个响应处理时间很快），就会触发一个新的请求。