TypeScript中使用AxiosInstance时如何调用isAxiosError？

核心问题 #

isAxiosError()是Axios全局静态对象（AxiosStatic）的方法，不属于单个实例（AxiosInstance）的方法，因此直接用实例调用会报错。以下是几种可行的解决方式：

方案1：导入独立的isAxiosError函数（推荐，Axios v0.27+） #

从Axios v0.27版本开始，官方将isAxiosError作为独立工具函数导出，直接导入即可使用，无需依赖全局对象或实例：

import axios, { AxiosInstance, AxiosError, isAxiosError } from 'axios';

// 创建实例时直接配置baseURL，避免污染全局默认值
const axios_instance: AxiosInstance = axios.create({
  baseURL: 'http://localhost:3000/v1/'
});

// 在catch逻辑中使用
this.axios_instance.post<AddUserResponse>(...)
  .then(...)
  .catch((err: Error | AxiosError) => {
    if (isAxiosError(err)) {
      console.log('error message: ', err.message);
      throw err.message;
    } else {
      console.log('unexpected error: ', err);
      throw err;
    }
  });

方案2：使用全局Axios对象的isAxiosError方法 #

如果你的Axios版本低于v0.27，或不想导入独立函数，可以直接调用全局axios对象的isAxiosError方法：

import axios from 'axios';

// ... 实例创建代码省略

this.axios_instance.post<AddUserResponse>(...)
  .then(...)
  .catch((err: Error | AxiosError) => {
    if (axios.isAxiosError(err)) { // 调用全局axios的方法
      console.log('error message: ', err.message);
      throw err.message;
    } else {
      console.log('unexpected error: ', err);
      throw err;
    }
  });

方案3：手动类型检查（不依赖内置方法） #

若不想依赖Axios内置判断逻辑，可通过检查AxiosError特有的属性来识别，比如isAxiosError标记、response或request属性：

this.axios_instance.post<AddUserResponse>(...)
  .then(...)
  .catch((err: Error | AxiosError) => {
    if ('isAxiosError' in err && err.isAxiosError) {
      console.log('error message: ', err.message);
      throw err.message;
    } else {
      console.log('unexpected error: ', err);
      throw err;
    }
  });

额外优化：实例创建方式 #

你之前修改axios.defaults.baseURL再创建实例的方式虽可行，但更推荐直接在create方法中传入配置，避免影响全局Axios的默认设置：

// 推荐写法
const axios_instance: AxiosInstance = axios.create({
  baseURL: 'http://localhost:3000/v1/'
});

内容的提问来源于stack exchange，提问作者Sven Bardos