封装Axios抽象层时catch块报Object is of type 'unknown'错误

TypeScript 4.4及以上版本默认将catch代码块捕获的错误对象类型设置为unknown，不允许直接访问未声明的属性，所以直接取error.response就会触发类型报错。

推荐使用类型收窄的安全写法，步骤如下：

1. 从axios包中导入AxiosError类型
2. 在catch块中先用axios提供的类型守卫方法isAxiosError判断错误类型，再访问对应属性
3. 补充非Axios错误场景的兜底逻辑，避免运行时报错

修正后的完整代码 #

import axios, { AxiosResponse, AxiosError } from "axios";
import { injectable } from "inversify";
import { HttpRequest, HttpResponse, IHttp } from "../../interfaces/Ihttp";

@injectable()
export class AxiosHttpClient implements IHttp {
  async request(params: HttpRequest): Promise<HttpResponse> {
    let axiosResponse: AxiosResponse;

    try {
      axiosResponse = await axios.request({
        url: params.url,
        method: params.method,
        data: params.body,
        headers: params.headers,
      });
    } catch (error) {
      // 类型收窄判断是否为Axios抛出的错误
      if (axios.isAxiosError(error)) {
        // Axios错误场景下优先取返回的响应，无响应时给兜底值
        axiosResponse = error.response ?? {
          status: error.status ?? 500,
          data: { message: error.message || '请求无响应' }
        } as AxiosResponse
      } else {
        // 非Axios错误场景兜底
        axiosResponse = {
          status: 500,
          data: { message: '未知错误' }
        } as AxiosResponse
      }
    }

    return {
      statusCode: axiosResponse.status,
      data: axiosResponse.data,
    };
  }
}

如果不需要额外兜底逻辑，也可以用快速类型断言写法，安全性相对更低：

catch (error) {
  axiosResponse = (error as AxiosError).response as AxiosResponse;
}

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