如何检测axios-retry完成最大重试次数？实现上限后登出并停止重试

1. 可行性结论 #

完全可以实现你的需求：在请求达到最大重试次数时执行登出，并停止后续所有请求的重试。

2. 具体实现方案 #

核心思路 #

利用axios-retry自动注入的retryCount属性追踪重试次数，结合全局标记控制后续请求的重试逻辑，同时在响应错误拦截器中触发登出操作。

代码实现 #

// 定义全局最大重试次数（和axios-retry配置保持一致）
const MAX_RETRIES = 5;
// 全局标记：控制是否停止所有后续请求的重试
let shouldStopRetries = false;

// 配置axios-retry
axiosRetry(axios, {
  retries: MAX_RETRIES,
  retryDelay: (retryCount) => {
    console.log(`retry attempt: ${retryCount}`);
    return retryCount * 5000;
  },
  retryCondition: (error) => {
    // 仅当是可重试错误且未触发全局停止标记时，才允许重试
    return axiosRetry.isRetryableError(error) && !shouldStopRetries;
  }
});

// 添加响应错误拦截器，检测最大重试次数
axios.interceptors.response.use(
  response => response,
  error => {
    const { config } = error;
    // 检查当前请求的重试次数是否达到最大值
    if (config?.retryCount === MAX_RETRIES) {
      // 执行登出函数
      handleLogout();
      // 触发全局停止标记，阻止后续所有请求重试
      shouldStopRetries = true;
    }
    return Promise.reject(error);
  }
);

3. 关键细节说明 #

• config.retryCount：axios-retry会自动在请求配置中注入该属性，每次重试后递增。第5次重试失败后，该值等于MAX_RETRIES，此时进入错误拦截器触发登出。
• 全局标记shouldStopRetries：可根据项目环境调整存储方式（比如Vuex、Redux或模块级变量），只要能全局访问即可。
• 确保MAX_RETRIES与axios-retry配置的retries值一致，避免逻辑冲突。

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