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

vue ajax提交防止伪造,axios+vue防止点击提交按钮而发送多次请求相关推荐

[vue] ajax、fetch、axios这三都有什么区别？
[vue] ajax.fetch.axios这三都有什么区别? ajax, 实际上就是xmlHttpRequest, 旧瓶装新酒的一种新应用的称呼 fetch是新出的规范, 具体实现原理不太清楚, 但 ...
html中点击提交按钮显示提交i成功,百里香叶：点击提交按钮后显示成功信息
我有一个spring-boot申请,Thymeleaf.我有非常基本的情况.有一个表单,当用户点击提交按钮时,表单数据应发送到控制器,但在同一页面中应显示成功消息.百里香叶:点击提交按钮后显示成功信息 ...
Vue学习笔记（二）—— vue项目中使用axios
一.文档链接 axios文档 vue开发插件二.axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XML ...
ajax同步请求后再次发送上一个请求
场景:实现一个发送注册社团申请的功能. 实现流程:点击"注册"按钮,发送一个请求,请求路径经过解析后,由控制器里的指定的方法处理,跳转到注册页面:完成信息的编辑后,点击" ...
jquery+bootstrap实现tab切换, 每次切换时都请求数据, 点击提交分别向不同的地址提交数据...
今天一个朋友叫帮做一个tab切换, 每一个tab内容区域都是从后台取出的数据, 这些数据要用表格的形式显示处理, 并且表格的内容区域可以修改, 如下所示: 例子查看请演示查看. 截图如图所示: 实现步 ...
bootstrap tabale 点击_jquery+bootstrap实现tab切换, 每次切换时都请求数据, 点击提交分别向不同的地址提交数据...
今天一个朋友叫帮做一个tab切换, 每一个tab内容区域都是从后台取出的数据, 这些数据要用表格的形式显示处理, 并且表格的内容区域可以修改, 如下所示: 例子查看请演示查看. 截图如图所示: 实现步 ...
Vue项目首页_使用axios发送ajax请求
安装axios: npm install axios --save 在Home.vue中发送一个ajax请求,然后把数据传递给子组件. 在Home.vue中: import axios from ' ...
Vue为何弃用经典的Ajax，选择新技术Axios？
目录一.选择什么网络模块? 二.axios功能特点三.axios支持多种请求方式四.发送并发请求五.全局配置六.创建axios实例七.常见的配置选项八.axios的封装九.封装一个re ...
Vue的axios与ajax的区别：axios是对ajax的封装
分析 axios是通过promise实现对ajax技术的一种封装,就像jQuery实现ajax封装一样. ajax技术实现了网页的局部数据刷新,axios实现了对ajax的封装. axios是ajax ...

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

vue ajax提交防止伪造,axios+vue防止点击提交按钮而发送多次请求相关推荐

最新文章

热门文章