前端接口防止重復請求實現方案

2024-08-05 09:29:00

防止接口重復請求是前端開發中常見的需求，本文介紹了使用標志位控制、防抖和節流技術、取消請求以及結合React Hooks使用的幾種策略。根據具體的項目需求和場景，可以選擇最適合的方案來實現。

在前端開發中，防止接口重復請求是一個常見的需求，特別是在網絡狀況不佳或用戶誤操作時，重復請求可能導致服務器壓力增大、數據不一致等問題。本文將探討幾種在前端實現防止接口重復請求的策略。

1. 使用標志位控制

最簡單直接的方法是使用標志位來控制請求的發送。在發送請求前，設置一個標志位表示請求正在發送中，等到請求結束后，再將標志位設置為可發送狀態。

let isRequesting = false;

function fetchData() {
  if (isRequesting) {
    console.log('請求正在發送中，請勿重復點擊');
    return;
  }
  isRequesting = true;
  fetch('/api/data')
    .then(response => response.json())
    .then(data => {
      console.log(data);
      isRequesting = false; // 請求結束，重置標志位
    })
    .catch(error => {
      console.error('請求出錯', error);
      isRequesting = false; // 請求出錯，也需重置標志位
    });
}

2. 使用防抖（Debounce）和節流（Throttle）

防抖和節流是減少函數執行頻率的兩種常見技術，它們在防止重復請求時也非常有用。

防抖（Debounce）：在事件被觸發n秒后再執行回調，如果在這n秒內又被觸發，則重新計時。
節流（Throttle）：規定在一個單位時間內，只能觸發一次函數。如果這個單位時間內觸發多次函數，只有一次生效。

// 使用lodash庫中的debounce函數
import debounce from 'lodash/debounce';

const debouncedFetchData = debounce(fetchData, 1000);

function fetchData() {
  fetch('/api/data')
    .then(response => response.json())
    .then(data => {
      console.log(data);
    })
    .catch(error => {
      console.error('請求出錯', error);
    });
}

// 綁定事件
button.addEventListener('click', debouncedFetchData);

3. 使用取消請求

對于支持取消操作的HTTP請求庫（如axios），可以在發送新的請求前取消之前的請求。

let cancelTokenSource = null;

function fetchData() {
  if (cancelTokenSource) {
    cancelTokenSource.cancel('Previous request canceled due to new request.');
  }

  cancelTokenSource = axios.CancelToken.source();

  axios.get('/api/data', {
    cancelToken: cancelTokenSource.token
  })
    .then(response => {
      console.log(response.data);
    })
    .catch(error => {
      if (axios.isCancel(error)) {
        console.log('Request canceled', error.message);
      } else {
        console.error('Request failed', error);
      }
    });
}

4. 結合React Hooks使用

如果你在使用React，可以創建自定義Hooks來處理請求狀態。

import { useState, useCallback } from 'react';

function useFetchData() {
  const [isLoading, setIsLoading] = useState(false);

  const fetchData = useCallback(() => {
    if (isLoading) {
      return;
    }
    setIsLoading(true);
    fetch('/api/data')
      .then(response => response.json())
      .then(data => {
        console.log(data);
        setIsLoading(false);
      })
      .catch(error => {
        console.error('請求出錯', error);
        setIsLoading(false);
      });
  }, [isLoading]);

  return [fetchData, isLoading];
}

// 在組件中使用
const MyComponent = () => {
  const [fetchData, isLoading] = useFetchData();

  return (
    <button onClick={fetchData} disabled={isLoading}>
      {isLoading ? 'Loading...' : 'Fetch Data'}
    </button>
  );
};

結論

責任編輯：武曉燕來源：程序員編程日記

前端接口請求