什麼是介面重覆提交？

介面重覆提交指的是在網路通信中，同一個請求被客戶端多次發送到伺服器端的情況。這種情況可能由於多種原因導致，例如用戶在等待期間多次點擊提交按鈕、網路超時後客戶端重新發送請求、客戶端發送的請求在網路傳輸過程中出現重覆等。

介面重覆提交可能會導致多種問題，當伺服器收到重覆請求時，可能會多次處理相同的數據，導致數據重覆操作或者產生不一致的結果。重覆提交請求會增加伺服器的負載和資源消耗，特別是在高併發情況下，可能會導致伺服器壓力過大，影響系統的性能和穩定性。有些請求是具有副作用的，例如支付、提交訂單等，重覆提交可能導致用戶被重覆扣款或者重覆生成訂單，從而導致業務異常或者用戶不滿。

下麵我們就來看看前端有哪些防止介面重覆提交的方法。

前端如何防止介面的重覆提交？

禁用提交按鈕

在用戶點擊提交按鈕後，立即禁用該按鈕，防止用戶多次點擊。可以在介面請求結束後重新啟用按鈕。代碼如下所示。

<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