Vue项目中Axios超时重试与网络错误处理应统一收口至拦截器：超时（ECONNABORTED）自动重试并防无限循环，网络错误按response/request/message三类精准捕获，结合可配置实例与token刷新机制实现健壮请求。
Vue 项目中用 Axios 处理超时重试和网络错误，核心不是写一堆 catch，而是把逻辑收口到拦截器里——一次配置，全局生效。
超时重试：用响应拦截器自动补发
超时本质是请求没收到响应（error.code === 'ECONNABORTED'），不是服务器返回了错误码。所以不能靠后端状态码判断，得在响应拦截器里识别并重试。
- 给请求加标记（如
_retry = true），避免无限重试 - 重试前清掉原请求的
timeout，否则第二次还可能超时 - 建议控制重试次数（比如最多 2 次）和间隔（如 800ms），别一上来就猛刷
- 注意：重试只对「无响应」有效，对 502/504 这类网关错误无效，它们属于接口错误，应走业务异常流程
网络错误统一捕获：分三类处理
Axios 报错对象结构固定，关键看 error.response、error.request、error.message 三个字段：
- 有 response：请求发出去了，服务器给了反馈（如 401、403、500），归为「接口错误」或「业务异常」，按后端约定码做提示
- 有 request 但无 response：请求发了，但没收到任何回包（常见于断网、DNS失败、超时、跨域被拦），这是典型的「网络错误」，可统一提示“网络连接异常，请检查网络”
- 啥都没有：请求根本没发出去（比如 URL 写错、Axios 配置出错），属于「系统异常」，一般开发期就能暴露，上线后极少出现
实战封装建议：带开关的可配置实例
别在每个 API 调用里手动写重试逻辑，而是在 axios 实例里支持可选参数：
立即学习“前端免费学习笔记（深入）”；
- 默认关闭重试，关键操作（如提交订单）才开启：
axios.post('/order', data, { retry: 2 }) - 全局控制是否弹错误提示：
showError: false用于静默轮询场景 - 网络错误发生时，自动降级：比如展示缓存数据、禁用按钮、触发离线模式
- 配合 Vue 的
onErrorCaptured或全局错误监听，兜住漏网的未 catch 请求错误
别忽略的细节
很多团队卡在重试后 Token 过期问题上——第一次请求因 token 失效被拒，重试时没刷新 token，又失败。解决方案很简单：
- 在请求拦截器里，每次发请求前校验 token 有效性（比如检查过期时间）
- 遇到 401 错误时，先刷新 token，再用新 token 重发原请求（注意保留原始 config）
- 重试逻辑和 token 刷新逻辑要解耦，避免互相干扰
