Axios响应拦截器抛出的自定义异常对象无法正常获取

问题根源 #

你遇到的[object Object]是因为Error构造函数仅接受字符串作为消息参数，当传入对象时，会自动调用Object.toString()将其转为字符串，导致原始对象丢失。

解决方案 #

方法1：自定义Error类（推荐） #

创建继承自原生Error的自定义错误类，将自定义数据直接挂载到实例上，同时保证instanceof判断正常：

import axios from 'axios';

const axiosApi = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
});

// 自定义错误类
class CustomError extends Error {
  constructor(customData) {
    super(JSON.stringify(customData)); // 可选：将对象转为字符串作为错误消息
    this.name = 'CustomError';
    this.customData = customData; // 挂载自定义数据
    // 修复原型链，确保instanceof判断生效
    Object.setPrototypeOf(this, CustomError.prototype);
  }
}

const responseInterceptor = (error) => {
  throw new CustomError({
    name: 'John',
    age: 40,
  });
};

axiosApi.interceptors.response.use((response) => response, responseInterceptor);

const get = async (url) => {
  return await axiosApi
    .get(url, { crossDomain: true })
    .then((response) => response?.data);
};

export default function Home() {
  get('/user/1').then(
    (data) => {},
    (error) => {
      if (error instanceof CustomError) {
        console.log(error.customData); // 输出原始自定义对象 {name: 'John', age: 40}
      }
    }
  );
  return <div>hi</div>;
}

方法2：给原生Error实例添加自定义属性 #

直接创建原生Error实例，把自定义数据作为额外属性挂载：

const responseInterceptor = (error) => {
  const customError = new Error('自定义业务错误');
  customError.details = {
    name: 'John',
    age: 40,
  };
  throw customError;
};

// 捕获错误时
get('/user/1').then(
  (data) => {},
  (error) => {
    console.log(error.details); // 输出原始自定义对象
  }
);

注意事项 #

• 自定义Error类时必须修复原型链，否则instanceof判断可能失效。
• 如果需要处理Axios自身的请求错误（如网络错误、状态码异常），可在拦截器中先判断错误类型，再添加自定义数据抛出。

内容的提问来源于stack exchange，提问作者Mohammad Miras