Vue 3 中响应拦截器怎么在服务器超时时切换备用线路-Vue.js-PHP中文网

vue 3中超时切换备用线路需在响应拦截器error分支判断code==='econnaborted'或message含'timeout'，且config.__retry为false时，修改baseurl为备用地址并重发请求，限制重试次数。

vue 3 中响应拦截器怎么在服务器超时时切换备用线路

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() 实例）：

check-vue-style

检查 .vue 单文件组件的 CSS 规范问题并给出提示，适用于样式检查、CSS审查和 Vue 页面质量巡检。

下载

// 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;