axios响应拦截器进行请求重放

### 使用 Axios 的响应拦截器实现请求自动重试 Axios 是一个基于 Promise 的 HTTP 客户端，支持浏览器和 Node.js 环境。通过配置 Axios 的响应拦截器，可以捕获失败的请求并尝试重新发送它们。 以下是实现请求自动重试的核心逻辑： #### 配置 Axios 响应拦截器 在 Axios 中，可以通过 `axios.interceptors.response` 来设置响应拦截器。当接收到错误状态码（如 401 Unauthorized）或其他特定条件时，可以在拦截器中触发重试机制。 ```javascript import axios from 'axios'; // 创建 Axios 实例 const instance = axios.create(); let isRefreshing = false; let failedQueue = []; // 添加响应拦截器 instance.interceptors.response.use( (response) => { // 如果成功，则返回数据 return response.data ? response.data : response; }, async function (error) { const originalRequest = error.config; if ( error.response && error.response.status === 401 && // 判断是否为未授权错误 !originalRequest._retry // 防止无限循环重试 ) { if (!isRefreshing) { isRefreshing = true; try { await refreshAccessToken(); // 自定义刷新 Token 方法 } catch (refreshError) { console.error('Failed to refresh token:', refreshError); failedQueue.forEach((req) => req.reject(refreshError)); failedQueue = []; isRefreshing = false; throw refreshError; } isRefreshing = false; // 成功刷新后处理队列中的请求 failedQueue.forEach((req) => req.resolve(instance(req.config))); failedQueue = []; } return new Promise((resolve, reject) => { originalRequest._retry = true; // 设置标记防止重复调用 failedQueue.push({ resolve, reject, config: originalRequest, }); }); } // 对于其他错误情况直接抛出异常 return Promise.reject(error); } ); async function refreshAccessToken() { // 这里模拟刷新访问令牌的过程 const response = await instance.post('/auth/refresh-token', { refreshToken: localStorage.getItem('refreshToken'), }); if (response.data.accessToken) { setAuthorizationHeader(response.data.accessToken); // 更新全局 Header localStorage.setItem('accessToken', response.data.accessToken); } else { throw new Error('无法获取新的 Access Token'); } } function setAuthorizationHeader(token) { instance.defaults.headers.common['Authorization'] = `Bearer ${token}`; } ``` 上述代码实现了以下功能： - 当检测到 401 错误时，会尝试刷新访问令牌[^1]。 - 在刷新过程中，阻止后续请求继续执行直到新令牌被应用。 - 刷新完成后，重新发送之前因权限不足而失败的请求。 #### 关键点说明 1. **防抖机制** 变量 `isRefreshing` 和数组 `failedQueue` 负责管理正在刷新的状态以及等待重试的请求列表。这避免了多个并发请求同时发起刷新操作[^2]。 2. **自定义方法** 函数 `refreshAccessToken()` 应该替换为你实际项目中用于更新认证信息的方法；同样地，函数 `setAuthorizationHeader()` 将最新的认证凭证写入到 Axios 默认 Headers 中以便下次请求能够携带有效凭据。 3. **错误处理** 若刷新过程本身也发生问题，则需清理排队的任务并将这些任务视为最终失败。 --- ###