什麼是介面重覆提交？ 介面重覆提交指的是在網路通信中，同一個請求被客戶端多次發送到伺服器端的情況。這種情況可能由於多種原因導致，例如用戶在等待期間多次點擊提交按鈕、網路超時後客戶端重新發送請求、客戶端發送的請求在網路傳輸過程中出現重覆等。 介面重覆提交可能會導致多種問題，當伺服器收到重覆請求時，可能 ...
什麼是介面重覆提交？
介面重覆提交指的是在網路通信中，同一個請求被客戶端多次發送到伺服器端的情況。這種情況可能由於多種原因導致，例如用戶在等待期間多次點擊提交按鈕、網路超時後客戶端重新發送請求、客戶端發送的請求在網路傳輸過程中出現重覆等。
介面重覆提交可能會導致多種問題，當伺服器收到重覆請求時，可能會多次處理相同的數據，導致數據重覆操作或者產生不一致的結果。重覆提交請求會增加伺服器的負載和資源消耗，特別是在高併發情況下，可能會導致伺服器壓力過大，影響系統的性能和穩定性。有些請求是具有副作用的，例如支付、提交訂單等，重覆提交可能導致用戶被重覆扣款或者重覆生成訂單，從而導致業務異常或者用戶不滿。
下麵我們就來看看前端有哪些防止介面重覆提交的方法。
前端如何防止介面的重覆提交？
禁用提交按鈕
在用戶點擊提交按鈕後，立即禁用該按鈕，防止用戶多次點擊。可以在介面請求結束後重新啟用按鈕。代碼如下所示。
<form id="myForm">
<!-- 表單內容 -->
<button type="submit" id="submitButton">提交</button>
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault(); // 阻止預設提交行為
document.getElementById('submitButton').disabled = true; // 禁用提交按鈕
// 發送請求
fetch('/api/submit', {
method: 'POST',
// 請求參數
}).then(function(response) {
// 處理響應
document.getElementById('submitButton').disabled = false; // 啟用提交按鈕
}).catch(function(error) {
console.error('Error:', error);
document.getElementById('submitButton').disabled = false; // 啟用提交按鈕（如果請求失敗）
});
});
</script>
顯示載入狀態
在用戶提交表單後，顯示一個載入狀態的提示，告知用戶正在處理請求，避免用戶重覆點擊提交按鈕。
<form id="myForm">
<!-- 表單內容 -->
<button type="submit" id="submitButton">提交</button>
<div id="loadingMessage" style="display: none;">正在載入...</div>
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault(); // 阻止預設提交行為
document.getElementById('submitButton').disabled = true; // 禁用提交按鈕
document.getElementById('loadingMessage').style.display = 'block'; // 顯示載入狀態
// 發送請求
fetch('/api/submit', {
method: 'POST',
// 請求參數
}).then(function(response) {
// 處理響應
document.getElementById('submitButton').disabled = false; // 啟用提交按鈕
document.getElementById('loadingMessage').style.display = 'none'; // 隱藏載入狀態
}).catch(function(error) {
console.error('Error:', error);
document.getElementById('submitButton').disabled = false; // 啟用提交按鈕（如果請求失敗）
document.getElementById('loadingMessage').style.display = 'none'; // 隱藏載入狀態（如果請求失敗）
});
});
</script>
設置防抖或節流
在用戶點擊提交按鈕後，使用防抖或節流的技術延遲發送請求，確保只發送一次請求。防抖和節流是一種常見的前端性能優化技術，可以控制函數的執行頻率。
// 防抖函數
function debounce(func, delay) {
let timer;
return function() {
clearTimeout(timer);
timer = setTimeout(func, delay);
};
}
document.getElementById('submitButton').addEventListener('click', debounce(function() {
// 發送請求
fetch('/api/submit', {
method: 'POST',
// 請求參數
}).then(function(response) {
// 處理響應
}).catch(function(error) {
console.error('Error:', error);
});
}, 1000)); // 1秒內只允許點擊一次
生成請求標識符
在每次請求前生成一個唯一的請求標識符（例如 UUID），並將該標識符作為請求的一部分發送到後端。後端在接收到請求後，檢查該標識符是否已經處理過，如果已經處理過則不再處理。前端可以通過記錄請求標識符的狀態來避免重覆提交。
// 生成唯一標識符
function generateRequestId() {
return Math.random().toString(36).substr(2, 9);
}
let requestId;
document.getElementById('submitButton').addEventListener('click', function() {
requestId = generateRequestId(); // 生成請求標識符
// 發送請求
fetch('/api/submit', {
method: 'POST',
headers: {
'X-Request-Id': requestId // 將請求標識符添加到請求頭中
},
// 請求參數
}).then(function(response) {
// 處理響應
}).catch(function(error) {
console.error('Error:', error);
});
});
使用狀態管理庫
如果前端使用了狀態管理庫（如 Redux、Vuex 等），可以在提交請求前檢查狀態，確保不會重覆提交相同的請求。
import store from './store'; // 引入狀態管理庫
document.getElementById('submitButton').addEventListener('click', function() {
if (store.state.isSubmitting) {
return; // 如果正在提交，則不執行後續操作
}
// 設置提交狀態
store.commit('setSubmitting', true);
// 發送請求
fetch('/api/submit', {
method: 'POST',
// 請求參數
}).then(function(response) {
// 處理響應
store.commit('setSubmitting', false); // 恢復非提交狀態
}).catch(function(error) {
console.error('Error:', error);
store.commit('setSubmitting', false); // 恢復非提交狀態（如果請求失敗）
});
});
介面鎖定
在前端發送請求前，先檢查是否存在正在處理的相同請求，如果存在則不發送新的請求。可以使用一個變數來記錄當前正在處理的請求，以防止重覆提交。
let isRequesting = false;
document.getElementById('submitButton').addEventListener('click', function() {
if (isRequesting) {
return; // 如果正在請求，則不執行後續操作
}
isRequesting = true; // 鎖定介面
// 發送請求
fetch('/api/submit', {
method: 'POST',
// 請求參數
}).then(function(response) {
// 處理響應
isRequesting = false; // 解鎖介面
}).catch(function(error) {
console.error('Error:', error);
isRequesting = false; // 解鎖介面（如果請求失敗）
});
});
以上方法可以單獨使用，也可以組合使用，以提高介面請求的可靠性和安全性。
總結
防止介面重覆提交是為了確保系統的數據一致性、避免不必要的資源浪費和提升用戶體驗。為了避免介面重覆提交帶來的問題，需要在前端和後端都進行相應的處理，例如在前端禁用提交按鈕、顯示載入狀態，在後端實現冪等性檢查等。
本文來自博客園，作者：喆星高照，轉載請註明原文鏈接：https://www.cnblogs.com/houxianzhou/p/18150517
