当前位置：首页 > news >正文

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

news 2025/2/25 4:04:12

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

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

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

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

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

难点	破解思路	实施风险
500+存量接口改造	全局拦截器方案	⭐⭐⭐⭐
文件上传特殊场景兼容	FormData特征识别	⭐⭐⭐
现有Loading体系兼容	发布订阅模式	⭐⭐

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

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

// 请求拦截器伪代码
axios.interceptors.request.use(config => {showLoading(); // 全局Loadingreturn 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并发）

指标	原始方案	哈希方案	终极方案
平均响应时间	326ms	217ms	189ms
错误率	38%	12%	0.3%
内存占用	1.2GB	860MB	720MB

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

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

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

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

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

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

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