几行代码，终结接口重复请求！同事赞不绝口

引言：重复请求的痛点与解决方案的必要性

在前端开发中，尤其是使用React、Vue等现代框架时，接口重复请求是一个常见且棘手的问题。用户快速点击按钮、组件重复渲染、路由跳转时未取消的旧请求……这些场景都可能导致同一接口被多次调用，进而引发数据不一致、性能浪费甚至业务逻辑错误。传统解决方案如手动取消请求、设置全局标志位等，往往存在代码冗余、维护困难或不够优雅的问题。本文将介绍一种通过几行代码实现的、优雅的防重复请求方案，让你的代码更健壮，同事纷纷点赞！

防重复请求的核心思路

防重复请求的核心在于识别重复请求并阻止其执行。这可以通过以下两种方式实现：

1. 请求状态管理：记录每个请求的状态（如请求中、已完成、已失败），在请求完成前阻止相同请求的再次发起。
2. 请求锁机制：为每个请求设置一个“锁”，在锁未释放前不允许重复请求。

结合这两种思路，我们可以设计一个既灵活又高效的防重复请求方案。

代码实现：封装防重复请求钩子

以React为例，我们可以封装一个自定义钩子useDebounceRequest，它接受一个异步请求函数作为参数，并返回一个防重复的请求函数。以下是核心代码实现：

import { useRef } from 'react';
function useDebounceRequest(requestFn) {
  const pendingRef = useRef(false); // 请求锁
  const debouncedRequest = async (...args) => {
    if (pendingRef.current) {
      console.log('重复请求被阻止');
      return; // 锁已存在，阻止重复请求
    }
    pendingRef.current = true; // 上锁
    try {
      const result = await requestFn(...args);
      return result;
    } finally {
      pendingRef.current = false; // 解锁
    }
  };
  return debouncedRequest;
}

代码解析：优雅与实用的结合

1. 请求锁机制：通过useRef创建一个持久化的引用pendingRef，用于记录当前是否有请求在进行中。useRef的持久性确保了组件重新渲染时锁的状态不会丢失。

2. 防重复逻辑：在调用请求函数前，检查pendingRef.current的值。如果为true，说明有请求正在进行，直接返回；否则，设置锁为true，执行请求，并在请求完成后（无论成功或失败）解锁。

3. 通用性：该钩子接受一个异步请求函数作为参数，可以适配任何形式的API调用，如fetch、axios等，具有极高的通用性。

进阶优化：结合AbortController取消旧请求

虽然上述方案能有效阻止重复请求，但在某些场景下（如用户快速切换页面），我们可能希望取消正在进行的旧请求，以避免不必要的网络开销。这时，可以结合AbortController实现更精细的控制：

import { useRef } from 'react';
function useDebounceRequest(requestFn) {
  const pendingRef = useRef(false);
  const controllerRef = useRef(null); // 用于取消请求的控制器
  const debouncedRequest = async (...args) => {
    if (pendingRef.current) {
      controllerRef.current?.abort(); // 取消旧请求
      console.log('旧请求被取消，新请求将执行');
    }
    controllerRef.current = new AbortController(); // 创建新控制器
    pendingRef.current = true;
    try {
      const result = await requestFn(...args, {
        signal: controllerRef.current.signal, // 传递signal以支持取消
      });
      return result;
    } catch (error) {
      if (error.name !== 'AbortError') {
        throw error; // 非取消错误重新抛出
      }
      console.log('请求被取消');
    } finally {
      pendingRef.current = false;
    }
  };
  return debouncedRequest;
}

实际应用：在组件中使用

将上述钩子应用到实际组件中非常简单。以下是一个使用axios发起请求的示例：

import axios from 'axios';
import { useDebounceRequest } from './useDebounceRequest';
function MyComponent() {
  const fetchData = useDebounceRequest(async (url) => {
    const response = await axios.get(url);
    return response.data;
  });
  const handleClick = async () => {
    const data = await fetchData('https://api.example.com/data');
    console.log(data);
  };
  return <button onClick={handleClick}>获取数据</button>;
}

同事点赞的原因

1. 代码简洁：仅需几行代码，即可实现复杂的防重复请求逻辑。
2. 可复用性：钩子形式的设计，使得该功能可以在任何组件中轻松复用。
3. 健壮性：结合请求锁与取消机制，有效避免了数据不一致与性能浪费。
4. 易维护性：逻辑清晰，易于扩展与修改。

总结与展望

通过几行代码实现的防重复请求方案，不仅解决了前端开发中的一大痛点，还提升了代码的质量与用户体验。未来，我们可以进一步探索将该方案与更复杂的请求管理库（如react-query、swr）结合，实现更高级的缓存与错误处理功能。希望本文的分享能对你的开发工作有所帮助，让你的代码更加优雅与高效！