Axios 的错误回调主要可以分为三大类：网络/请求级错误、HTTP 状态码错误（如 401、502）以及配置/取消类错误。

🌐 网络与请求级错误

这类错误发生在请求无法成功发出或没有收到服务器响应时。此时，错误对象中通常没有 error.response 属性。

📡 HTTP 状态码错误 (4xx, 5xx)

当请求成功发送，但服务器返回了一个非 2xx 的 HTTP 状态码时，Axios 会将其视为错误。此时，错误对象中包含 error.response 对象。

• 4xx 客户端错误：请求有问题。

  • 400 (Bad Request)：请求参数错误。
  • 401 (Unauthorized)：未授权，通常需要重新登录。
  • 403 (Forbidden)：禁止访问，权限不足。
  • 404 (Not Found)：请求的资源不存在。

• 5xx 服务端错误：服务器处理请求时出错。

  • 500 (Internal Server Error)：服务器内部错误。
  • 502 (Bad Gateway)：网关错误。
  • 503 (Service Unavailable)：服务不可用。
  • 504 (Gateway Timeout)：网关超时。

注意，特殊情况下 withCredentials: true 可能导致 401 等错误被归类为 ERR_NETWORK。

⚙️ 配置、请求与取消错误

这类错误与请求的配置、构造过程或用户主动取消有关。

• ERR_BAD_OPTION / ERR_BAD_OPTION_VALUE: 提供给 Axios 的配置选项无效。
• ERR_BAD_REQUEST: 请求格式有误或缺少必要参数。
• ERR_BAD_RESPONSE: 服务器响应无法被正常解析。
• ERR_FR_TOO_MANY_REDIRECTS: 请求重定向次数超过最大限制。
• ERR_CANCELED: 请求被用户主动取消。
• ERR_INVALID_URL: 提供的 URL 无效。
• ERR_NOT_SUPPORT: 当前环境不支持该特性或方法。

💎 总结与实践

在实际开发中，可以通过检查 error 对象来区分错误类型并作出对应处理，例如：

axios.get('/api/data').catch(error => {
  if (error.response) {
    // 1. 服务器响应了，但状态码不是 2xx
    console.log('HTTP 错误:', error.response.status);
    if (error.response.status === 401) { /* 跳转登录 */ }
    if (error.response.status === 502) { /* 提示服务暂时不可用 */ }
  } else if (error.request) {
    // 2. 请求已发出，但没有收到响应 (网络层错误)
    console.log('网络错误:', error.code); // 可能是 ERR_NETWORK 等
  } else {
    // 3. 在发送请求前就触发了错误 (配置错误等)
    console.log('请求配置错误:', error.message);
  }
});

import axios from "axios";
import { MessageBox, Message } from "element-ui";
import cookie from "js-cookie";
// 创建axios实例
const service = axios.create({
  baseURL: "http://localhost:9001", // api的base_url
  timeout: 20000, // 请求超时时间
});
// http request 拦截器
service.interceptors.request.use(
  (config) => {
    //debugger
    if (cookie.get("guli_token")) {
      config.headers["token"] = cookie.get("guli_token");
    }
    return config;
  },
  (err) => {
    return Promise.reject(err);
  }
);
// http response 拦截器
service.interceptors.response.use(
  (response) => {
    //debugger
    if (response.data.code == 28004) {
      console.log("response.data.resultCode是28004");
      // 返回 错误代码-1 清除ticket信息并跳转到登录页面
      //debugger
      window.location.href = "/login";
      return;
    } else {
      if (response.data.code !== 20000) {
        //25000：订单支付中，不做任何提示
        if (response.data.code != 25000) {
          Message({
            message: response.data.message || "error",
            type: "error",
            duration: 5 * 1000,
          });
        }
      } else {
        return response;
      }
    }
  },
  (error) => {
    debugger;
    // 网络/请求级错误、HTTP 状态码错误
    if (error.response) {
      // 请求成功发送，但服务器返回了一个非 2xx 的 HTTP 状态码时，Axios 会将其视为错误。此时，错误对象中包含 error.response 对象。
      // 400 (Bad Request)：请求参数错误。
      // 401 (Unauthorized)：未授权，通常需要重新登录。
      // 403 (Forbidden)：禁止访问，权限不足。
      // 404 (Not Found)：请求的资源不存在。
      // 500 (Internal Server Error)：服务器内部错误。
      // 502 (Bad Gateway)：网关错误。
      // 503 (Service Unavailable)：服务不可用。
      // 504 (Gateway Timeout)：网关超时。
      if (error.response.status === 401) {
        // 401 Unauthorized
        console.log("401 Unauthorized: 用户未授权或登录已过期。");
      } else if (error.response.status === 403) {
        // 403 Forbidden
        console.log("403 Forbidden: 用户权限不足，禁止访问。");
      } else if (error.response.status === 404) {
        // 404 Not Found
        console.log("404 Not Found: 请求的资源不存在。");
      } else if (error.response.status === 500) {
        // 500 Internal Server Error
        console.log("500 Internal Server Error: 服务器内部错误。");
      } else if (error.response.status === 502) {
        // 502 Bad Gateway
        console.log("502 Bad Gateway: 网关错误。");
      } else if (error.response.status === 503) {
        // 503 Service Unavailable
        console.log("503 Service Unavailable: 服务不可用。");
      } else if (error.response.status === 504) {
        // 504 Gateway Timeout
        console.log("504 Gateway Timeout: 网关超时。");
      } else {
        console.log(
          `HTTP 错误: 状态码 ${error.response.status}, 信息: ${error.response.statusText}`
        );
      }
    } else {
      // 处理网络错误
      // ERR_NETWORK 网络连接中断、DNS 解析失败、CORS 策略阻止、服务器无响应等
      // ECONNABORTED 由 Axios 配置的 timeout 触发
      // ETIMEDOUT 请求超时（操作系统/底层网络触发）
      //ECONNRESET 防火墙/安全组阻断
      if (error.message.includes("Network Error")) {
        Message.error("网络错误，请检查您的网络连接。");
      } else if (error.message.includes("timeout")) {
        Message.error("请求超时，请稍后再试。");
      } else if (error.message.includes("ECONNABORTED")) {
        Message.error("请求被中止，请稍后再试。");
      } else if (error.message.includes("ETIMEDOUT")) {
        Message.error("请求超时，请稍后再试。");
      } else if (error.message.includes("ECONNRESET")) {
        Message.error("连接被重置，请检查防火墙或安全组设置。");
      } else {
        Message.error(`未知网络错误: ${error.message}`);
      }
    }

    // 配置、请求与取消错误
    //这类错误与请求的配置、构造过程或用户主动取消有关。
    // ERR_BAD_OPTION / ERR_BAD_OPTION_VALUE: 提供给 Axios 的配置选项无效。
    // ERR_BAD_REQUEST: 请求格式有误或缺少必要参数。
    // ERR_BAD_RESPONSE: 服务器响应无法被正常解析。
    // ERR_FR_TOO_MANY_REDIRECTS: 请求重定向次数超过最大限制。
    // ERR_CANCELED: 请求被用户主动取消。
    // ERR_INVALID_URL: 提供的 URL 无效。
    // ERR_NOT_SUPPORT: 当前环境不支持该特性或方法。

    //处理配置错误
    if (
      error.code === "ERR_BAD_OPTION" ||
      error.code === "ERR_BAD_OPTION_VALUE"
    ) {
      console.error("请求配置错误，请检查 Axios 配置。", error.message);
    } else if (error.code === "ERR_BAD_REQUEST") {
      console.error("请求格式有误或缺少必要参数。", error.message);
    } else if (error.code === "ERR_BAD_RESPONSE") {
      console.error("服务器响应无法被正常解析。", error.message);
    } else if (error.code === "ERR_FR_TOO_MANY_REDIRECTS") {
      console.error("请求重定向次数超过最大限制。", error.message);
    } else if (error.code === "ERR_CANCELED") {
      console.warn("请求被用户主动取消。", error.message);
    } else if (error.code === "ERR_INVALID_URL") {
      console.error("提供的 URL 无效。", error.message);
    } else if (error.code === "ERR_NOT_SUPPORT") {
      console.error("当前环境不支持该特性或方法。", error.message);
    }

    return Promise.reject(error);
  }
);

export default service;