TypeScript中Response Error类型的导入来源与对应依赖包查询

看起来你是在使用Redux Toolkit的createAsyncThunk处理异步请求，想要正确捕获带有response.status的请求错误类型。这个问题的答案取决于你用来发起请求的工具，下面分两种最常见的情况说明：

情况1：使用Axios发起请求（最常见） #

如果你的doFetch是基于Axios实现的，那么你需要安装axios包，并导入它提供的AxiosError类型——这是Axios请求失败时抛出的错误实例类型。

步骤1：安装Axios #

npm install axios
# 或者用yarn
yarn add axios

步骤2：修改你的代码 #

import { AxiosError } from 'axios';
import { createAsyncThunk } from '@reduxjs/toolkit';

export const fetchList = createAsyncThunk(
 'list-get',
 async () => {
 try {
 const response = await doFetch(/* 你的请求参数 */);
 return response.data;
 } catch (error) {
 // 用类型守卫判断是否为AxiosError
 if (error instanceof AxiosError && error.response?.status === 0) {
 doHandling();
 } else {
 // 重新抛出错误，让createAsyncThunk处理rejected状态
 throw error;
 }
 }
 }
);

为什么这样做？ #

Axios在请求失败时（包括HTTP错误和网络错误）会抛出AxiosError实例，这个类型内置了response属性，包含了响应状态码、响应体等信息。用instanceof AxiosError做类型守卫，可以让TypeScript正确推断错误的类型，避免类型报错。

情况2：使用原生Fetch API #

如果你用的是浏览器原生的fetch API，那么不需要额外安装包，但要注意：fetch不会自动抛出HTTP错误（比如4xx、5xx状态码），只有网络故障时才会抛出错误。你需要手动处理HTTP错误并扩展错误类型：

import { createAsyncThunk } from '@reduxjs/toolkit';

export const fetchList = createAsyncThunk(
 'list-get',
 async () => {
 try {
 const response = await fetch(/* 你的请求配置 */);
 // 检查响应是否成功
 if (!response.ok) {
 // 创建一个包含response属性的错误对象
 const requestError = new Error('请求失败') as Error & { response: Response };
 requestError.response = response;
 throw requestError;
 }
 // 解析响应数据
 return await response.json();
 } catch (error) {
 // 用类型守卫判断错误是否包含response属性
 if ('response' in error && error.response.status === 0) {
 doHandling();
 } else {
 throw error;
 }
 }
 }
);

重要提示 #

TypeScript的全局Error类型默认是没有response属性的，所以你不能直接写catch (error: Error)来断言类型，这会导致类型不兼容。必须通过类型守卫（比如instanceof或者in操作符）或者类型断言来让TypeScript识别错误的具体结构。

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