Axios从v0.26.0迁移至1.6.0：类型'never'无'message'属性错误

问题原因 #

从Axios v0.26.0升级到1.6.0后，AxiosError类型变为InternalAxiosError的别名，同时取消请求抛出的是独立的Cancel对象而非AxiosError。旧代码中直接访问error.message时，TypeScript因类型推断问题（如类型收窄为never、Cancel的message属性可选）抛出编译错误：Property 'message' does not exist on type 'never'。

修改方案 #

1. 修正函数参数类型 #

旧代码仅接收AxiosError，但实际可能传入Cancel或其他错误类型，需拓宽参数类型：

import type { AxiosError } from 'axios';
import { Cancel, isCancel, isAxiosError } from 'axios';

export const throwHttpError = (error: AxiosError | Cancel | unknown): Promise<IHttpErrorResponse> => {
  // ...
};

2. 安全获取错误信息 #

通过类型检查避免直接访问属性导致的类型错误：

// 统一获取错误信息
let errorMessage = 'Unknown error';
if (error instanceof Error) {
  errorMessage = error.message;
} else if (typeof error === 'object' && error !== null && 'message' in error) {
  errorMessage = String(error.message);
}
console.log(errorMessage);

3. 调整取消错误分支 #

利用isCancel类型守卫后，直接使用提前获取的errorMessage（避免Cancel类型的message可选性问题）：

const isCancelError = isCancel(error);
if (isCancelError) {
  return Promise.reject<IHttpErrorResponse>(
    httpError({
      statusCode: 200,
      errorMessage: errorMessage,
      errorKey: HttpErrorEvent.CALL_CANCELED,
    })
  );
}

4. 精准判断AxiosError网络错误 #

使用isAxiosError类型守卫确保操作的是AxiosError实例：

if (isAxiosError(error) && error.message === NETWORK_ERROR_MESSAGE) {
  return Promise.reject<IHttpErrorResponse>(
    httpError({
      errorMessage: 'Sorry, an error has occurred. Please refresh the page.',
      errorKey: HttpErrorEvent.NETWORK_ERROR,
    })
  );
}

完整修改后代码 #

import type { AxiosError } from 'axios';
import { Cancel, isCancel, isAxiosError } from 'axios';

export const throwHttpError = (error: AxiosError | Cancel | unknown): Promise<IHttpErrorResponse> => {
  // 安全获取错误信息
  let errorMessage = 'Unknown error';
  if (error instanceof Error) {
    errorMessage = error.message;
  } else if (typeof error === 'object' && error !== null && 'message' in error) {
    errorMessage = String(error.message);
  }
  console.log(errorMessage);

  const isCancelError = isCancel(error);
  if (isCancelError) {
    return Promise.reject<IHttpErrorResponse>(
      httpError({
        statusCode: 200,
        errorMessage: errorMessage,
        errorKey: HttpErrorEvent.CALL_CANCELED,
      })
    );
  }

  if (isAxiosError(error) && error.message === NETWORK_ERROR_MESSAGE) {
    return Promise.reject<IHttpErrorResponse>(
      httpError({
        errorMessage: 'Sorry, an error has occurred. Please refresh the page.',
        errorKey: HttpErrorEvent.NETWORK_ERROR,
      })
    );
  }

  // 其他错误处理逻辑...
};

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