axios 拦截重复请求

### 使用 Axios 拦截并防止重复请求 为了拦截并阻止重复请求，在创建 Axios 实例时可以设置自定义的拦截逻辑。通过维护一个活动请求集合来跟踪正在进行中的请求，当新请求到来时先检查该集合是否存在相同的请求。如果存在，则取消新的请求；反之则将其加入到集合中。 ```javascript const pendingRequests = new Map(); // 添加唯一标识符作为key用于存储pending状态下的请求 function generateRequestId(config) { return [config.method, config.url, JSON.stringify(config.params), JSON.stringify(config.data)].join('&'); } axios.interceptors.request.use((config) => { const requestId = generateRequestId(config); if (pendingRequests.has(requestId)) { // 存在相同请求，返回Promise.reject表示拒绝此次请求 return Promise.reject(new Error('Duplicate request detected')); } else { // 将当前请求存入Map对象 pendingRequests.set(requestId, true); // 请求成功发送后清除记录 config.__cancelToken__ = axios.CancelToken.source(); config.cancelToken = config.__cancelToken__.token; return config; } }, error => Promise.reject(error)); axios.interceptors.response.use(response => { const requestId = generateRequestId(response.config); // 清理已完成的请求 pendingRequests.delete(requestId); return response; }, error => { const { config } = error; if (config && !error.response) { // 取消请求的情况处理 if (!axios.isCancel(error)) { const requestId = generateRequestId(config); // 若请求被取消也应清理对应的标记 pendingRequests.delete(requestId); } } return Promise.reject(error); }); ``` 此代码片段展示了如何利用 `axios` 的请求和响应拦截器功能[^1] 来实现对重复提交请求的有效控制，并且提供了相应的错误处理机制以确保程序健壮性。每当有新的 HTTP 请求发出之前都会经过这个过滤过程，从而避免不必要的资源浪费以及可能引发的数据一致性问题。