前端防重复请求终极方案：从Loading地狱到精准拦截的架构升级

🔥 事故现场还原：疯狂点击引发的血案

凌晨1点23分，监控系统突然告警：

📉 服务器CPU飙升至98%
🗃️ 数据库出现3000+脏数据
💥 用户端弹出上百个错误弹窗

事故原因：黑产脚本通过0.5秒内发起200次领券请求，导致系统雪崩！
老板批示：48小时内必须实现前端全局防重复请求！

🚨 技术攻坚：三大致命难题

⚔️ 方案PK：从青铜到王者的进化之路

方案一：粗暴Loading法（新手必踩坑）

// 请求拦截器伪代码
axios.interceptors.request.use(config => {
  showLoading(); // 全局Loading
  return config;
});

// 致命缺陷：连续点击导致Loading套娃

缺陷分析：
✅ 开发速度：5分钟
❌ 用户体验：多个Loading叠加
❌ 安全隐患：无法防御脚本攻击

方案二：哈希拦截法（中级工程师陷阱）

const requestMap = new Map();

function generateKey(config) {
  return `${config.method}-${config.url}`; // 关键参数丢失！
}

// 真实案例翻车现场
axios.get('/api?page=1'); // 正常
axios.get('/api?page=2'); // 被误拦截！

哈希碰撞测试：
10万次请求参数交换测试，碰撞率高达17.3%！💣

🏆 终极方案：发布订阅+精准指纹（高可用架构）

系统架构设计

核心代码实现（生产级）

class RequestControl {
  constructor() {
    this.pending = new Set();
    this.emitter = new EventEmitter(); // 自定义事件中心
  }

  // 生成唯一指纹（解决哈希碰撞）
  generateKey(config) {
    const { method, url, params, data } = config;
    const hash = window.location.hash;
    return crypto.createHash('md5')
      .update(`${method}-${url}-${JSON.stringify(params)}-${this._handleFormData(data)}-${hash}`)
      .digest('hex');
  }

  // 处理FormData特殊场景
  _handleFormData(data) {
    if (data instanceof FormData) {
      return Array.from(data.entries()).toString();
    }
    return data;
  }
}

拦截器完整配置

// 请求拦截器
axios.interceptors.request.use(config => {
  const key = generateKey(config);
  
  if (requestControl.pending.has(key)) {
    return new Promise((resolve, reject) => {
      requestControl.emitter.once(key, ({ status, data }) => {
        status === 'success' ? resolve(data) : reject(data);
      });
    }).catch(error => {
      return Promise.reject({ __isCacheError: true, error });
    });
  }
  
  requestControl.pending.add(key);
  return config;
});

// 响应拦截器
axios.interceptors.response.use(response => {
  const key = generateKey(response.config);
  requestControl.emitter.emit(key, { status: 'success', data: response });
  requestControl.pending.delete(key);
  return response;
}, error => {
  const key = generateKey(error.config);
  requestControl.emitter.emit(key, { status: 'error', data: error });
  requestControl.pending.delete(key);
  return Promise.reject(error);
});

🧪 特殊场景解决方案

场景1：文件上传防误杀

function isUploadRequest(config) {
  return config.headers['Content-Type']?.includes('multipart/form-data');
}

// 生成文件特征码
function generateFileKey(formData) {
  return Array.from(formData.entries())
    .map(([name, file]) => `${name}-${file.name}-${file.size}`)
    .join('|');
}

场景2：页面跳转兜底处理

window.addEventListener('beforeunload', () => {
  requestControl.pending.clear();
  requestControl.emitter.removeAllListeners();
});

📊 性能压测报告（JMeter 1000并发）

🔧 工程化建议（血泪经验）

1. 调试模式：增加环境变量控制拦截器开关

   if (process.env.NODE_ENV === 'development') {
     window.__ENABLE_REQUEST_INTERCEPTOR = false; 
   }
   

2. 权重系数：对关键接口设置优先级

   const API_WEIGHT = {
     '/api/payment': 3,  // 高权重
     '/api/list': 1     // 低权重
   };
   

3. 僵尸清理：30秒自动释放未响应请求

   setInterval(() => {
     const now = Date.now();
     requestControl.pending.forEach((timestamp, key) => {
       if (now - timestamp > 30000) {
         requestControl.pending.delete(key);
       }
     });
   }, 5000);
   

🚀 技术总结：
通过发布订阅模式+精准请求指纹的方案，我们不仅按时交付需求，还意外提升了系统整体性能。该方案已在生产环境稳定运行3个月，成功拦截恶意请求超1200万次！