說說防止重複傳送ajax請求的方法有哪些？各自有什麼優缺點？

王铁柱6發表於2024-12-07

防止重複傳送 AJAX 請求是前端開發中一個常見的問題，尤其是在網路延遲較高或使用者操作頻繁的情況下。以下是一些常用的方法，以及它們的優缺點：

1. 禁用提交按鈕:

  • 方法: 在 AJAX 請求傳送後，立即禁用提交按鈕，並在請求完成後重新啟用。
  • 優點: 簡單易實現，可以有效防止使用者在請求處理期間重複點選。
  • 缺點: 使用者體驗不太好，尤其是在請求處理時間較長的情況下。使用者無法得知請求的進度，只能被動等待。只適用於表單提交的場景，不適用於其他觸發 AJAX 請求的情況。

2. 設定一個標誌位:

  • 方法: 宣告一個變數 isLoading，在 AJAX 請求傳送前將其設定為 true，請求完成後設定為 false。在每次傳送請求前，先檢查 isLoading 的值，如果為 true，則不傳送請求。
  • 優點: 相對簡單，比禁用按鈕的使用者體驗更好，可以應用於各種觸發 AJAX 請求的場景。
  • 缺點: 如果有多個 AJAX 請求需要管理，需要為每個請求設定單獨的標誌位，略顯繁瑣。

3. 使用防抖 (Debounce):

  • 方法: 設定一個定時器，在一定時間內，如果使用者重複觸發了 AJAX 請求，則清除之前的定時器，重新設定一個新的定時器。只有當定時器最終觸發時，才真正傳送 AJAX 請求。
  • 優點: 適合處理使用者快速連續操作的場景，例如搜尋框輸入提示，可以有效減少請求次數，提高效能。
  • 缺點: 會有一定的延遲，不適合需要立即響應使用者操作的場景。

4. 使用節流 (Throttle):

  • 方法: 在一定時間間隔內，只允許傳送一次 AJAX 請求。如果使用者在時間間隔內重複觸發了請求，則忽略後續的請求。
  • 優點: 適合控制請求頻率，例如實時位置更新，可以避免過多的請求造成伺服器壓力。
  • 缺點: 可能會丟失一些使用者操作，不適合需要響應所有使用者操作的場景。

5. 在請求攔截器中取消重複請求 (Axios):

  • 方法: 使用 Axios 攔截器，維護一個 pendingRequests 列表，儲存正在進行的請求。在傳送請求前，檢查 pendingRequests 列表中是否存在相同的請求，如果存在，則取消之前的請求，再傳送新的請求。
  • 優點: 可以精細地控制請求，避免重複傳送相同的請求，適合需要對請求進行更嚴格管理的場景。
  • 缺點: 實現相對複雜，需要對 Axios 攔截器有一定的瞭解。

示例程式碼 (使用標誌位):

let isLoading = false;

function sendAjaxRequest() {
  if (isLoading) {
    return; // 如果正在載入，則不傳送請求
  }

  isLoading = true;

  fetch('/your-api-endpoint')
    .then(response => {
      // 處理響應
    })
    .catch(error => {
      // 處理錯誤
    })
    .finally(() => {
      isLoading = false;
    });
}

選擇哪種方法取決於具體的應用場景。 如果只是簡單的表單提交，禁用按鈕就足夠了。如果需要更精細的控制，可以使用標誌位、防抖、節流或請求攔截器。

希望這些資訊對您有所幫助!

相關文章