什么是接口重復提交？

       接口(kou)重(zhong)復(fu)提交(jiao)指的(de)是在(zai)網絡(luo)通(tong)信中，同一(yi)個請(qing)求被客戶(hu)(hu)(hu)端多次(ci)(ci)發送到服務器端的(de)情(qing)況。這(zhe)種(zhong)情(qing)況可能由于多種(zhong)原(yuan)因導(dao)致(zhi)，例如用(yong)戶(hu)(hu)(hu)在(zai)等待期間多次(ci)(ci)點擊(ji)提交(jiao)按鈕、網絡(luo)超時后客戶(hu)(hu)(hu)端重(zhong)新發送請(qing)求、客戶(hu)(hu)(hu)端發送的(de)請(qing)求在(zai)網絡(luo)傳(chuan)輸過程中出現重(zhong)復(fu)等。

防止接口重復提交的幾種方式

1. 禁用提交按鈕

        在用戶點擊提交(jiao)按鈕后(hou)，立即禁(jin)用該按鈕，防止用戶多(duo)次(ci)點擊。可(ke)以(yi)在接口(kou)請求結束(shu)后(hou)重新啟用按鈕。

<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>

2. 顯示加載狀態

       在用戶(hu)提(ti)交表單(dan)后，顯示一(yi)個(ge)加載狀態的提(ti)示，告知(zhi)用戶(hu)正在處理請求，避免用戶(hu)重復(fu)點(dian)擊提(ti)交按鈕。

<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>

3. 設置防抖或節流

       在用(yong)(yong)戶點擊提交(jiao)按鈕(niu)后(hou)，使(shi)用(yong)(yong)防抖(dou)或節流的(de)技(ji)術延(yan)遲發(fa)(fa)送請求，確保(bao)只發(fa)(fa)送一(yi)次請求。防抖(dou)和(he)節流是(shi)一(yi)種常見的(de)前端性(xing)能優(you)化技(ji)術，可以控制函數的(de)執行頻(pin)率。

// 防抖函數
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秒內只允許點擊一次

4. 生成請求標識符

       在(zai)每次請求(qiu)前(qian)(qian)生成一個唯一的請求(qiu)標(biao)識符(fu)（例(li)如 UUID），并將該標(biao)識符(fu)作為(wei)請求(qiu)的一部分發送到后端(duan)。后端(duan)在(zai)接(jie)收到請求(qiu)后，檢查該標(biao)識符(fu)是否(fou)已(yi)經處理(li)過(guo)，如果(guo)已(yi)經處理(li)過(guo)則(ze)不再處理(li)。前(qian)(qian)端(duan)可以通過(guo)記(ji)錄請求(qiu)標(biao)識符(fu)的狀態來避免重(zhong)復提交(jiao)。

// 生成唯一標識符
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);
  });
});

5. 接口鎖定

       在(zai)前(qian)端發送請(qing)求(qiu)前(qian)，先檢查是否(fou)存在(zai)正在(zai)處理的(de)相同請(qing)求(qiu)，如果存在(zai)則不發送新(xin)的(de)請(qing)求(qiu)。可以使用一個變量來記錄(lu)當前(qian)正在(zai)處理的(de)請(qing)求(qiu)，以防止重復提交。

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; // 解鎖接口（如果請求失敗）
  });
});