TypeScript下如何正确处理Axios请求与错误适配IUser类型

核心问题 #

现有代码未对请求异常做捕获处理，当接口报错时createAsyncThunk会直接抛出未格式化的错误对象，和reducer预期的IUser相关结构不匹配，因此触发类型错误。

修改后的thunk action代码 #

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

// 提前定义鉴权接口错误的返回结构，统一类型
interface AuthRequestError {
  message: string;
  statusCode?: number;
}

export const checkAuth = createAsyncThunk<
  // 泛型1：请求成功后的返回值类型
  { user: IUser; isAuth: boolean },
  // 泛型2：thunk入参的类型
  string,
  // 泛型3：请求失败后的payload类型
  { rejectValue: AuthRequestError }
>(
  `authService/checkAuth`,
  async (prevLocation: string, { rejectWithValue }) => {
    try {
      const response = await axios.get<IUser>('/api/auth/current');
      return { user: response.data, isAuth: true };
    } catch (err) {
      // 识别Axios服务端响应错误
      if (err instanceof AxiosError && err.response) {
        return rejectWithValue({
          // 可根据后端实际返回的错误字段调整取值
          message: err.response.data?.msg || err.response.data?.message || '身份校验失败',
          statusCode: err.response.status
        });
      }
      // 处理非服务端返回的错误：网络异常、跨域、请求中断等
      return rejectWithValue({
        message: '网络连接异常，请检查网络后重试'
      });
    }
  }
);

Slice中对应状态处理 #

需要在extraReducers中覆盖请求的三个状态，避免未处理异常导致的类型错误：

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

const initialState = {
  user: null as IUser | null,
  isAuth: false,
  loading: false,
  errorMsg: null as string | null
};

const authSlice = createSlice({
  name: 'auth',
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      // 请求中状态处理
      .addCase(checkAuth.pending, (state) => {
        state.loading = true;
        state.errorMsg = null;
      })
      // 请求成功状态处理
      .addCase(checkAuth.fulfilled, (state, action) => {
        state.loading = false;
        state.user = action.payload.user;
        state.isAuth = action.payload.isAuth;
      })
      // 请求失败状态处理
      .addCase(checkAuth.rejected, (state, action) => {
        state.loading = false;
        state.errorMsg = action.payload?.message || '未知错误';
        // 失败时重置鉴权相关状态，避免残留无效数据
        state.isAuth = false;
        state.user = null;
      });
  }
});

关键注意点 #

• 提前为createAsyncThunk声明完整的泛型参数，明确成功、失败场景的返回结构，从类型层面避免不匹配问题
• 所有异常都通过rejectWithValue返回格式化后的结构，不要直接抛出原始错误对象
• 必须覆盖请求的pending、fulfilled、rejected三个状态的处理逻辑，不要只处理成功场景
• 如果项目中Axios有统一封装的响应拦截器，也可以在拦截器中提前统一格式化错误结构，减少每个thunk里的重复处理逻辑

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