前端接口防止重复请求实现方案-51CTO.COM

在前端开发中，防止接口重复请求是一个常见的需求，特别是在网络状况不佳或用户误操作时，重复请求可能导致服务器压力增大、数据不一致等问题。本文将探讨几种在前端实现防止接口重复请求的策略。

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; // 请求出错，也需重置标志位
    });
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

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);1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

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);
      }
    });
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

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>
  );
};1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.

结论

防止接口重复请求是前端开发中常见的需求，本文介绍了使用标志位控制、防抖和节流技术、取消请求以及结合React Hooks使用的几种策略。根据具体的项目需求和场景，可以选择最适合的方案来实现。