前端防止用户重复提交请求的方案_前端防止重复提交

在项目开发时，在网络情况比较差的情况下，可能用户在提交表单时多次点击，然后导致多次请求后台接口导致数据重复写入，造成数据混乱。这个场景在前端和后端都能处理，但后端一般会让前端处理这个问题(手动狗头)，那么前端需要怎么处理呢。

1. 第一种方案：以Vue+ElementUI项目为例，如下面所示代码所示，简单实用。

<template>
<!--... todo -->
   <el-button size='small' :disabled="Loading" :loading='Loading' @click='handleClick()'>提交</el-button>
</template>
<script>
   export default {
   	data() {
         return {
              Loading: false
          }
      },
    },
    methods: {
   		handleClick() {
   			let url = 'https://baidu.com'
   			this.Loading = true;
   			this.$http['post'](url, {}).then(res => {
   		         // ... todo
   		        this.Loading = false;
   		    }).finally(() => {
   		     	this.Loading = false;
   		    });
   	     }
     }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

上面例子使用时用一个状态记录当前请求状态，接口响应后将状态重置，这方案实现比较简单，但是需要在每个函数里面去处理，非常的很繁琐，下面我们介绍下第二种方案，非常高效。
2. 在axios二次封装的拦截器中处理，如下面代码所示：

import axios from 'axios'
// 创建一个http请求
const http = axios.create({
 baseURL: 'https://www.baidu.com',
 timeout: 1000 * 180,
 withCredentials: true
})
let requestList = new Set() // 所有经过拦截器的请求url存储空间
// 请求拦截器
http.interceptors.request.use(config => {
   //... todo
   // 不处理get请求,get请求有幂等性
 if (config.method !== 'get') {
 // 利用axios cancelToken 先取消请求
   config.cancelToken = new axios.CancelToken(e => {
   // console.log(e, config, 'CancelToken')
   // 在这里取消重复请求，上个请求未完成时，相同的请求不会再次执行
   requestList.has(`${config.method}/${config.url}`) ? e(`${config.method}/${config.url}---重复请求被中断`) : requestList.add(`${config.method}/${config.url}`)
   })
 }
 return config
}, error => {
 console('error',error)
 return Promise.reject(error)
})
// 响应拦截
http.interceptors.response.use(response => {
 // 响应成功删除存储的url,防止下次请求被取消
 requestList.delete(`${response.config.method}/${response.config.url}`)
 // console.log(requestList)
 return response
}, error => {
// 响应错误也需要删除存储的url
 requestList.delete(`${error.message ? error.message.split('---')[0] : error.split('---')[0]}`)
 // console.log(requestList)
 console.error(error)
 return Promise.reject(error)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

这样就可以在请求的时候，预先取消请求，如果同类型的请求正在持续，那么后面的请求就会被成功取消，否则就会取消请求失败。这样全局处理比方案一方便很多，但是用户在页面上没有感知，体验感不够友好，也可以两种结合一起使用。