为何Axios拦截器在请求失败时会额外发起3次请求?
问题描述

请求失败时会额外重试3次,总共发起4次请求,仅请求失败时出现该现象,返回200状态码时无此问题,需要停止该重试行为。
现有拦截器代码
const http = axios.create({ headers: HeadersObject, baseURL, }) http.interceptors.request.use( (config) => { const token = getTokenInformationFromLocalStorage(); if (token) { config.headers["Authorization"] = `bearer ${token}`; } else { delete config.headers["Authorization"]; } return config; }, (error) => { return Promise.reject(error); } ); http.interceptors.response.use((response) => { if (response.data.errors?.length) { response.data.errors.map((error: ErrorType) => { const id = uuidv4(); store.dispatch(addToast({id, message: error.message, type: "error"})); }); } return response }, async (err) => { const originalConfig = err.config; if (err.response) { if (err.response.status === 401 && !originalConfig._retry) { originalConfig._retry = true; try { const rs = await refreshToken(); const {result} = rs.data; if (result) { setTokenInformationToLocalStorage(result); http.defaults.headers.common["Authorization"] = result.token; return http(originalConfig); } else { store.dispatch(logout()) return Promise.reject("refresh token is expire!"); } } catch (_error: any) { if (_error.response && _error.response.data) { return Promise.reject(_error.response.data); } return Promise.reject(_error); } } if (err.response.status === 403 && err.response.data) { return Promise.reject(err.response.data); } } return Promise.reject(err); } )
解决方案
你的拦截器逻辑仅在401未重试过时发起一次重试,不会导致3次额外请求,问题根源是Axios默认或第三方插件开启了重试机制,按以下步骤处理:
- 修改Axios实例配置,明确关闭重试
在创建Axios实例时添加retry: 0参数,彻底禁用重试:
const http = axios.create({ headers: HeadersObject, baseURL, retry: 0, // 关闭所有重试 retryDelay: 0 // 确保无重试延迟 })
- 检查是否引入了axios-retry插件
如果项目中使用了axios-retry插件,要么移除相关初始化代码,要么将重试次数设为0:
// 若使用了axios-retry,修改配置 axiosRetry(http, { retries: 0 });
- 确认其他配置无重试逻辑
检查项目中是否有其他全局Axios配置、拦截器或工具类添加了重试逻辑,确保这些地方也关闭重试。
内容的提问来源于stack exchange,提问作者alireza tafreshi
相关产品推荐
相关产品推荐

