Vue 3中超时切换备用线路需在响应拦截器error分支判断code==='ECONNABORTED'或message含'timeout'，且config.__retry为false时，修改baseURL为备用地址并重发请求，限制重试次数。
Vue 3 中响应拦截器本身不直接处理“超时切换备用线路”，因为超时发生在请求发出后、响应未返回前，属于 请求阶段的异常，通常由 Axios 的 timeout 配置触发，错误会落入 响应拦截器的 error 回调（即第二个参数），但此时请求已中断，没有 HTTP 响应体或状态码。真正要实现“超时后自动重试另一地址”，关键在于：在请求失败（含超时）时，主动发起第二次请求，并指向备用 baseURL。
响应拦截器里捕获超时并重试备用地址
超时错误的特征是：error.code === 'ECONNABORTED' 或 error.message.includes('timeout')，且 error.response 为 undefined。这时可在响应拦截器的错误分支中判断并手动重发请求到备用接口：
- 需保留原始 config（如 url、method、data、headers），仅替换
baseURL或完整url - 避免无限重试，建议加次数限制（如最多 1 次备用）
- 重试请求不应再走同一套拦截器逻辑（否则会循环），可用
config.__retry = true标记跳过重复处理
示例代码（基于 axios.create() 实例）：
// src/utils/request.ts
import axios, { AxiosRequestConfig, AxiosError, AxiosResponse } from 'axios';
const primaryBase = '/api';
const backupBase = 'https://backup-api.example.com';
const service = axios.create({
baseURL: primaryBase,
timeout: 8000
});
service.interceptors.response.use(
(response: AxiosResponse) => response,
async (error: AxiosError) => {
const { config, code, message } = error;
// 判断是否为超时且尚未重试过
if (code === 'ECONNABORTED' || message.includes('timeout')) {
if (!config?.__retry) {
config.__retry = true;
// 切换 baseURL 并重发
config.baseURL = backupBase;
return service(config); // 注意：这里返回的是新 Promise，不是 reject
}
}
return Promise.reject(error);
}
);
export default service;
更健壮的做法：封装 retry 请求函数
把“主备切换”逻辑从拦截器中解耦出来，更可控、易测试：
立即学习“前端免费学习笔记（深入）”；
- 定义一个
requestWithFallback(url, options)工具函数 - 先用主地址发请求，Promise.race() + AbortController 控制超时
- 若主地址超时或失败，再发一次到备用地址
- 响应拦截器只专注通用逻辑（如 token、错误提示），不掺杂路由/地址切换
注意备用线路的兼容性
切换地址不等于万事大吉，还需确保：
- 备用 API 接口路径、参数格式、认证方式与主站一致（否则需在重试前手动适配 config）
- 备用服务有相同 CORS 策略或代理配置（浏览器环境）
- 若用代理（如 vite.config.ts 中的
server.proxy），备用地址也需配置对应代理规则 - 避免敏感信息（如 token）因跨域被丢弃——确保备用域名在同源策略允许范围内，或后端正确返回
Access-Control-Allow-Headers
不推荐在请求拦截器里切线路
请求拦截器在请求发出前执行，无法感知是否将超时；它适合加 header、改 url 路径等预处理，但不适合做“失败后兜底”。真正兜底动作必须发生在请求结束之后，也就是响应拦截器的 error 分支，或外层业务代码中显式调用重试逻辑。
