vue ajax提交防止伪造,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、做完了之后你还需要配合自己的代码做一定的处理，如果在响应完成，还在点击(因为这个响应处理时间很快)，就会触发一个新的请求。