防重复请求的优雅之道：几行代码搞定，同事赞不绝口！

在前端开发中，接口重复请求是一个常见但容易被忽视的问题。用户快速点击按钮、网络延迟导致请求重试、或是代码逻辑中未做防重处理，都可能引发同一接口的多次调用。这不仅浪费服务器资源，还可能导致数据不一致、业务逻辑错误等严重后果。本文将介绍一种简洁而优雅的解决方案，通过几行代码实现接口请求防重机制，让你的系统更加健壮，同事看了都说好！

一、为什么需要防重复请求？

1.1 用户体验优化

用户操作时，若因网络延迟或快速点击导致同一请求被多次发送，可能会看到重复的加载动画、提示信息，甚至收到多次操作成功的反馈，严重影响用户体验。

1.2 服务器资源节约

重复请求会占用不必要的服务器资源，包括CPU、内存、带宽等，尤其是在高并发场景下，这种浪费尤为明显。

1.3 业务逻辑正确性

某些业务场景下，重复请求可能导致数据不一致，如订单提交、支付操作等，一旦重复执行，可能引发严重的业务问题。

二、防重复请求的实现原理

防重复请求的核心思想是：在一段时间内，对同一请求标识（如URL、参数组合等）只允许执行一次。这可以通过多种方式实现，如使用锁机制、状态标记、或是请求队列等。本文将介绍一种基于状态标记的轻量级实现方式。

三、几行代码实现防重复请求

3.1 基本思路

1. 定义请求标识：根据请求的URL和参数生成一个唯一的标识符。
2. 状态管理：使用一个对象（如Map）来记录当前正在处理的请求标识。
3. 请求拦截：在发送请求前，检查该请求标识是否已在处理中，若是则拦截；否则，标记为处理中并发送请求。
4. 请求完成处理：请求完成后（无论成功或失败），从状态管理中移除该请求标识。

3.2 代码实现

以下是基于JavaScript的示例代码，使用Promise和Map来实现防重复请求：

// 请求防重管理器
const requestAntiDuplicate = {
  // 存储正在处理的请求标识
  pendingRequests: new Map(),
  /**
   * 生成请求标识
   * @param {string} url 请求URL
   * @param {Object} params 请求参数
   * @returns {string} 请求标识
   */
  generateRequestId(url, params) {
    // 这里简单地将URL和参数序列化为字符串作为标识
    // 实际应用中，可能需要更复杂的逻辑来确保唯一性
    const paramsStr = JSON.stringify(params);
    return `${url}_${paramsStr}`;
  },
  /**
   * 发送请求（带防重）
   * @param {string} url 请求URL
   * @param {Object} params 请求参数
   * @param {Function} requestFn 发送请求的函数，返回Promise
   * @returns {Promise} 请求结果的Promise
   */
  sendRequest(url, params, requestFn) {
    const requestId = this.generateRequestId(url, params);
    // 如果请求已在处理中，则直接返回一个已拒绝的Promise（或根据需求返回其他处理）
    if (this.pendingRequests.has(requestId)) {
      return Promise.reject(new Error('Request is already in progress'));
    }
    // 标记请求为处理中
    this.pendingRequests.set(requestId, true);
    // 发送请求
    return requestFn(url, params)
      .then(response => {
        // 请求成功，移除标记
        this.pendingRequests.delete(requestId);
        return response;
      })
      .catch(error => {
        // 请求失败，同样移除标记
        this.pendingRequests.delete(requestId);
        throw error;
      });
  }
};
// 示例请求函数（模拟）
function fetchData(url, params) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // 模拟请求成功或失败
      const isSuccess = Math.random() > 0.3; // 70%概率成功
      if (isSuccess) {
        resolve({ data: 'Request succeeded', params });
      } else {
        reject(new Error('Request failed'));
      }
    }, 1000);
  });
}
// 使用示例
const url = 'https://api.example.com/data';
const params = { id: 123 };
// 第一次请求，会正常发送
requestAntiDuplicate.sendRequest(url, params, fetchData)
  .then(response => console.log('First request success:', response))
  .catch(error => console.error('First request error:', error));
// 快速连续第二次请求，会被拦截
setTimeout(() => {
  requestAntiDuplicate.sendRequest(url, params, fetchData)
    .then(response => console.log('Second request success (should not happen):', response))
    .catch(error => console.error('Second request error (as expected):', error));
}, 100); // 100ms后发送，确保第一次请求已开始但未完成

3.3 代码解析

• generateRequestId：根据URL和参数生成唯一的请求标识。这里简单地将URL和参数序列化为字符串，实际应用中可能需要更复杂的逻辑来确保唯一性，尤其是当参数为对象或数组时。
• sendRequest：核心方法，负责发送请求并处理防重逻辑。首先检查请求标识是否已在pendingRequests中，若是则直接返回一个已拒绝的Promise；否则，标记为处理中并发送请求。请求完成后（无论成功或失败），从pendingRequests中移除该请求标识。
• fetchData：示例请求函数，模拟实际发送请求的过程。这里使用setTimeout和随机数来模拟请求的成功或失败。

四、进阶优化与注意事项

4.1 请求超时处理

在实际应用中，还需要考虑请求超时的情况。可以在发送请求时设置一个超时时间，若超时仍未收到响应，则认为请求失败，并移除相应的请求标识。

4.2 请求标识的唯一性

确保请求标识的唯一性至关重要。上述示例中简单地将URL和参数序列化为字符串作为标识，但在实际应用中，可能需要考虑参数的顺序、类型转换等问题，以确保不同参数组合不会生成相同的标识。

4.3 全局与局部防重

根据业务需求，防重机制可以应用于全局（如整个应用）或局部（如某个页面、组件）。全局防重需要更复杂的状态管理，而局部防重则相对简单。

4.4 与现有框架的集成

若项目已使用如Axios、Fetch API等请求库，可以考虑将防重逻辑封装为这些库的拦截器或中间件，以实现更无缝的集成。

五、总结

通过几行简洁的代码，我们实现了一个轻量级而有效的接口请求防重机制。这不仅提升了用户体验，节约了服务器资源，还确保了业务逻辑的正确性。在实际开发中，根据业务需求进行适当的优化和调整，可以让这一机制更加健壮和灵活。同事们在使用后纷纷表示，这一解决方案既简单又实用，大大提升了开发效率和系统稳定性。希望本文的介绍能对你有所帮助，让你的项目更加优雅和健壮！