Axios按状态码定义响应类型后出现类型不兼容问题求助

你当前的问题核心在于axios请求的泛型参数使用错误，以及catch返回值的类型匹配逻辑不当。以下是具体修正方案：

1. 保留原有类型定义 #

type SuccessResponseData = {
    users: /* 补充你的具体类型 */;
};

interface SuccessResponse extends AxiosResponse<SuccessResponseData, any> {
    status: 200;
}

type FailResponseData = {
    message: string;
};

interface FailResponse extends AxiosResponse<FailResponseData, any> {
   status: 400;
}

export type Response = SuccessResponse | FailResponse;

2. 修正请求调用的类型处理 #

axios请求方法的泛型参数规则是<T = any, R = AxiosResponse<T>>，其中T对应响应数据的类型，R对应完整响应对象的类型。你之前的泛型传参顺序错误，导致类型不兼容。同时需要在catch中正确处理错误响应的类型断言：

const response = await axios
  .post<SuccessResponseData, SuccessResponse>(endpoint, data)
  .catch((e: AxiosError<FailResponseData>) => {
    // 若业务逻辑确保错误响应状态码为400，直接断言类型
    return e.response as FailResponse;
  });

return response; // 此时response会自动推导为Response类型，无需额外强制断言

关键细节说明 #

• 泛型参数修正：axios.post的第一个泛型参数传入响应数据类型SuccessResponseData，第二个传入自定义的SuccessResponse，确保成功响应的类型与状态码200绑定。
• 错误响应的类型安全处理：如果无法保证错误响应一定是400状态码，可先判断状态码再断言，避免类型风险：

  .catch((e: AxiosError<FailResponseData>) => {
    if (e.response?.status === 400) {
      return e.response as FailResponse;
    }
    // 处理其他状态码场景，比如抛出错误或返回默认值
    throw new Error('Unexpected error status code');
  });
  

经过上述调整后，response的类型会自动匹配你定义的Response联合类型，类型兼容问题即可解决。

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