前端如何防止接口重复提交

种约定丶

什么是接口重复提交？

接口重复提交指的是在网络通信中，同一个请求被客户端多次发送到服务器端的情况。这种情况可能由于多种原因导致，例如用户在等待期间多次点击提交按钮、网络超时后客户端重新发送请求、客户端发送的请求在网络传输过程中出现重复等。
接口重复提交可能会导致多种问题，当服务器收到重复请求时，可能会多次处理相同的数据，导致数据重复操作或者产生不一致的结果。重复提交请求会增加服务器的负载和资源消耗，特别是在高并发情况下，可能会导致服务器压力过大，影响系统的性能和稳定性。有些请求是具有副作用的，例如支付、提交订单等，重复提交可能导致用户被重复扣款或者重复生成订单，从而导致业务异常或者用户不满。
下面我们就来看看前端有哪些防止接口重复提交的方法。
前端如何防止接口的重复提交？

禁用提交按钮

在用户点击提交按钮后，立即禁用该按钮，防止用户多次点击。可以在接口请求结束后重新启用按钮。代码如下所示。

1. <form id="myForm">
   
2.   
   
3.   <button type="submit" id="submitButton">提交</button>
   
4. </form>

复制代码

显示加载状态

在用户提交表单后，显示一个加载状态的提示，告知用户正在处理请求，避免用户重复点击提交按钮。

1. <form id="myForm">
   
2.   
   
3.   <button type="submit" id="submitButton">提交</button>
   
4.   正在加载...
   
5. </form>

复制代码

设置防抖或节流

在用户点击提交按钮后，使用防抖或节流的技术延迟发送请求，确保只发送一次请求。防抖和节流是一种常见的前端性能优化技术，可以控制函数的执行频率。

1. // 防抖函数
   
2. function debounce(func, delay) {
   
3.   let timer;
   
4.   return function() {
   
5.     clearTimeout(timer);
   
6.     timer = setTimeout(func, delay);
   
7.   };
   
8. }
   
9. 
   
10. document.getElementById('submitButton').addEventListener('click', debounce(function() {
    
11.   // 发送请求
    
12.   fetch('/api/submit', {
    
13.     method: 'POST',
    
14.     // 请求参数
    
15.   }).then(function(response) {
    
16.     // 处理响应
    
17.   }).catch(function(error) {
    
18.     console.error('Error:', error);
    
19.   });
    
20. }, 1000)); // 1秒内只允许点击一次

复制代码

生成请求标识符

在每次请求前生成一个唯一的请求标识符（例如 UUID），并将该标识符作为请求的一部分发送到后端。后端在接收到请求后，检查该标识符是否已经处理过，如果已经处理过则不再处理。前端可以通过记录请求标识符的状态来避免重复提交。

1. // 生成唯一标识符
   
2. function generateRequestId() {
   
3.   return Math.random().toString(36).substr(2, 9);
   
4. }
   
5. 
   
6. let requestId;
   
7. 
   
8. document.getElementById('submitButton').addEventListener('click', function() {
   
9.   requestId = generateRequestId(); // 生成请求标识符
   
10.   // 发送请求
    
11.   fetch('/api/submit', {
    
12.     method: 'POST',
    
13.     headers: {
    
14.       'X-Request-Id': requestId // 将请求标识符添加到请求头中
    
15.     },
    
16.     // 请求参数
    
17.   }).then(function(response) {
    
18.     // 处理响应
    
19.   }).catch(function(error) {
    
20.     console.error('Error:', error);
    
21.   });
    
22. });

复制代码

使用状态管理库

如果前端使用了状态管理库（如 Redux、Vuex 等），可以在提交请求前检查状态，确保不会重复提交相同的请求。

1. import store from './store'; // 引入状态管理库
   
2. 
   
3. document.getElementById('submitButton').addEventListener('click', function() {
   
4.   if (store.state.isSubmitting) {
   
5.     return; // 如果正在提交，则不执行后续操作
   
6.   }
   
7.   // 设置提交状态
   
8.   store.commit('setSubmitting', true);
   
9. 
   
10.   // 发送请求
    
11.   fetch('/api/submit', {
    
12.     method: 'POST',
    
13.     // 请求参数
    
14.   }).then(function(response) {
    
15.     // 处理响应
    
16.     store.commit('setSubmitting', false); // 恢复非提交状态
    
17.   }).catch(function(error) {
    
18.     console.error('Error:', error);
    
19.     store.commit('setSubmitting', false); // 恢复非提交状态（如果请求失败）
    
20.   });
    
21. });

复制代码

接口锁定

在前端发送请求前，先检查是否存在正在处理的相同请求，如果存在则不发送新的请求。可以使用一个变量来记录当前正在处理的请求，以防止重复提交。

1. let isRequesting = false;
   
2. 
   
3. document.getElementById('submitButton').addEventListener('click', function() {
   
4.   if (isRequesting) {
   
5.     return; // 如果正在请求，则不执行后续操作
   
6.   }
   
7.   isRequesting = true; // 锁定接口
   
8. 
   
9.   // 发送请求
   
10.   fetch('/api/submit', {
    
11.     method: 'POST',
    
12.     // 请求参数
    
13.   }).then(function(response) {
    
14.     // 处理响应
    
15.     isRequesting = false; // 解锁接口
    
16.   }).catch(function(error) {
    
17.     console.error('Error:', error);
    
18.     isRequesting = false; // 解锁接口（如果请求失败）
    
19.   });
    
20. });

复制代码

以上方法可以单独使用，也可以组合使用，以提高接口请求的可靠性和安全性。
总结

防止接口重复提交是为了确保系统的数据一致性、避免不必要的资源浪费和提升用户体验。为了避免接口重复提交带来的问题，需要在前端和后端都进行相应的处理，例如在前端禁用提交按钮、显示加载状态，在后端实现幂等性检查等。

来源:https://www.cnblogs.com/houxianzhou/p/18150517
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！