如何在Redux Toolkit AsyncThunk的rejected状态获取Axios错误响应data？

要在rejected状态里拿到Axios返回的错误响应data，关键是在createAsyncThunk里手动捕获错误，并用RTK提供的rejectWithValue方法把错误数据传递给reducer。具体步骤如下：

1. 修改createAsyncThunk代码，捕获并传递错误数据 #

在thunk函数里添加try/catch块，捕获Axios的错误后，取出响应数据并通过rejectWithValue抛出：

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

export const registerThunk = createAsyncThunk(
  "registerThunk", 
  async (payload: TRegisterPayload, { rejectWithValue }) => {
    try {
      const axios_response = await axios.post("http://127.0.0.1:5000/api/v1/createNewUser", payload);
      return axios_response;
    } catch (err) {
      // 断言为AxiosError类型，方便访问响应数据
      const axiosError = err as AxiosError;
      // 把后端返回的错误响应data传递给rejected状态
      return rejectWithValue(axiosError.response?.data);
    }
  }
);

2. 在slice的rejected case中访问错误数据 #

此时在rejected的reducer里，action.payload就是我们传递过来的错误响应data，可以直接使用：

builder.addCase(registerThunk.rejected, (state, action) => {
  state.state = 3;
  state.text = "Error";
  state.buttonColor = "red";
  // 优先用后端返回的错误信息，没有的话用默认错误消息
  state.errorMessage = action.payload?.message || action.error.message as string;
});

关键说明 #

• 不能直接抛出原始错误，因为createAsyncThunk会默认把错误包装成标准Error对象，丢失Axios的响应信息；必须用rejectWithValue来传递自定义的错误数据。
• 捕获错误时要断言为AxiosError类型，这样TypeScript才能识别response属性，避免类型报错。

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