Redux Toolkit中Axios请求错误处理：TypeScript类型定义问题

在TypeScript环境下，Redux Toolkit的Thunk函数中捕获异步请求错误时，catch块的错误默认类型是unknown，直接指定Error或AxiosError类型会触发类型检查报错——因为TypeScript无法确保捕获的错误一定属于该类型。以下是几种正确的类型定义与处理方案：

1. 官方推荐：结合axios.isAxiosError类型守卫 #

这是最安全且符合TypeScript类型规范的方案，通过Axios内置的类型守卫缩小错误范围，同时可以为响应数据指定自定义类型，精准获取服务器返回的提示信息。

步骤示例： #

定义错误响应类型

先明确服务器返回的错误数据结构，比如：

// 服务器返回的错误响应结构
interface ApiErrorResponse {
  message: string; // 对应"邮箱已存在"这类业务提示
  code?: number;   // 可选的错误码字段
}

在Thunk中处理错误

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

// 提交用户数据的Thunk
export const submitUser = createAsyncThunk(
  'user/submit',
  async (userData: { email: string; password: string }, { rejectWithValue }) => {
    try {
      const response = await axios.post('/api/users', userData);
      return response.data;
    } catch (err) {
      // 使用axios.isAxiosError做类型守卫，将err缩小为AxiosError<ApiErrorResponse>类型
      if (axios.isAxiosError(err)) {
        // 优先取服务器返回的提示， fallback到通用错误
        const errorMsg = err.response?.data?.message || '请求失败，请稍后重试';
        return rejectWithValue(errorMsg);
      }
      // 处理非Axios错误（如网络中断、代码逻辑错误）
      return rejectWithValue('发生未知错误');
    }
  }
);

在Slice中接收错误信息

import { createSlice } from '@reduxjs/toolkit';
import { submitUser } from './thunks';

interface UserState {
  loading: boolean;
  data: null | Record<string, any>;
  error: string | null;
}

const initialState: UserState = {
  loading: false,
  data: null,
  error: null,
};

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(submitUser.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(submitUser.fulfilled, (state, action) => {
        state.loading = false;
        state.data = action.payload;
      })
      .addCase(submitUser.rejected, (state, action) => {
        state.loading = false;
        // 这里action.payload就是Thunk中rejectWithValue传递的错误提示
        state.error = action.payload as string;
      });
  },
});

export default userSlice.reducer;

2. 类型断言（不推荐，仅特殊场景使用） #

如果能确保捕获的错误一定是AxiosError，可以使用类型断言，但这种方式跳过了TypeScript的类型检查，存在安全风险：

catch (err) {
  const axiosErr = err as AxiosError<ApiErrorResponse>;
  const errorMsg = axiosErr.response?.data?.message || '请求失败';
  return rejectWithValue(errorMsg);
}

这种方式适合你能100%确定错误来源的场景，但不建议在通用代码中使用，因为无法覆盖非Axios错误的情况。

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