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

14 篇文章 0 订阅

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

  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>

上面例子使用时用一个状态记录当前请求状态,接口响应后将状态重置,这方案实现比较简单,但是需要在每个函数里面去处理,非常的很繁琐,下面我们介绍下第二种方案,非常高效。
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)
})

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

  • 4
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在Java中,可以使用锁来防止重复提交。引用和引用展示了使用注解来实现锁的方法。通过在方法上添加相应的注解,可以实现对方法的加锁操作,从而避免重复提交的问题。这种方法可以在并发情况下有效地防止重复提交。 除了使用注解,还可以采用其他的方法来解决重复提交的问题。引用提供了一些解决方案。其中包括前端和后端的方案前端方案可以通过前端的js控制提交按钮的状态,避免用户多次提交。后端方案可以在提交后重定向到其他页面,防止用户通过刷新或浏览器的前进后退按钮造成的重复提交。还可以在后端将唯一标识符放入表单、session或token中,在每次操作时校验标识符,避免重复处理相同的请求。另外,还可以使用数据结构如ConcurrentHashMap、LRUMap或Google Cache来存储唯一标识符,实现防止重复提交的功能。最后,可以使用Redis分布式锁来实现对请求的加锁操作,确保同一时间只有一个请求能够进行处理。 综上所述,Java可以使用锁来防止重复提交。可以通过注解、前端控制、后端标识符校验或Redis分布式锁等方法来实现。具体的实现方式可以根据具体的需求和场景选择。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [java开发中 防止重复提交的几种方案](https://blog.csdn.net/qq_33454058/article/details/125516310)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值