如何在Axios响应拦截器中实现请求重试？

嘿，这个需求我之前处理过好多次，尤其是应对服务临时波动或者token过期的场景，其实有个非常简便的实现方式——核心就是复用原始请求的完整配置，不用手动重新拼接请求参数、headers这些内容。

核心思路 #

当服务器返回需要重试的错误时，我们可以从错误对象中取出原始请求的配置（error.config），然后直接用Axios实例调用request()方法传入这个配置，就能完全复刻上一次的请求。同时要注意加个标记避免无限重试循环。

完整代码示例 #

先创建一个自定义的Axios实例（推荐用实例而不是全局Axios，避免影响其他请求）：

import axios from 'axios';

// 创建自定义Axios实例
const apiClient = axios.create({
  baseURL: 'https://your-api-domain.com',
  timeout: 10000,
  // 这里可以加全局的headers，比如默认的Authorization
  headers: {
    'Content-Type': 'application/json',
  },
});

然后编写响应拦截器，处理错误并重试：

// 响应拦截器
apiClient.interceptors.response.use(
  // 请求成功时直接返回响应
  (response) => response,
  async (error) => {
    const originalRequest = error.config;

    // 1. 判断是否符合重试条件：比如特定错误码（500服务错误/401token过期），且未重试过
    if (
      (error.response?.status === 500 || error.response?.status === 401) &&
      !originalRequest._retry
    ) {
      // 2. 标记已重试，防止无限循环
      originalRequest._retry = true;

      // --- 可选：如果是401场景，先刷新token再更新请求headers ---
      // if (error.response.status === 401) {
      //   const newToken = await fetchNewToken(); // 你的刷新token逻辑
      //   originalRequest.headers.Authorization = `Bearer ${newToken}`;
      // }

      // 3. 重新发起原始请求
      return apiClient.request(originalRequest);
    }

    // 不符合重试条件，直接抛出错误给业务代码处理
    return Promise.reject(error);
  }
);

关键细节说明 #

• 复用原始配置：error.config包含了上一次请求的所有信息——URL、请求方法、请求体、headers、超时时间等，直接用它发起请求就能完全复刻之前的操作，省去了手动拼接的麻烦。
• 防止无限循环：添加_retry自定义标记，确保同一请求只会被重试一次（如果需要多次重试，可以扩展成计数逻辑，比如_retryCount，超过3次就停止）。
• 前置操作支持：如果需要在重试前做异步操作（比如刷新token），只需要在重新发起请求前完成异步逻辑，然后更新原始配置里的对应字段（比如headers）即可。

额外注意事项 #

• 不要对所有错误都重试：比如400（参数错误）、404（资源不存在）这类错误，重试也不会成功，要精准判断需要重试的错误场景。
• 重试次数限制：建议添加重试次数上限，避免因为服务持续故障导致无限重试消耗资源。

内容的提问来源于stack exchange，提问作者sundar