Axios报错时response为undefined 无法获取Express返回的错误信息

两个核心问题导致你无法获取服务端错误信息、Redux Toolkit无法进入rejected状态：

• Axios默认仅将状态码为2xx的响应当作请求成功处理，4xx/5xx响应会直接抛出异常进入catch分支。你之前在catch块中仅打印了错误日志，没有将错误透传给thunk，thunk感知不到请求失败，自然不会进入rejected状态。
• 报错场景下你的thunk回调没有返回任何有效内容，相当于默认返回undefined，所以你拿不到服务端的响应内容。

注意：你之前把findUser的返回值从undefined调整为null的操作无法解决该问题——服务端已经正常返回了404响应，问题完全出在前端的错误处理逻辑，和服务端查询函数的返回值类型无关。

1. 修正createAsyncThunk的错误处理逻辑 #

在catch块中通过thunkApi.rejectWithValue把错误信息透传给Redux，才能触发rejected状态：

const api = axios.create({
  baseURL:'http://localhost:4000/api',
  headers:{
    'Content-Type':"application/json"
  },
  withCredentials:true
})

const sendInvitation = createAsyncThunk("friends/sendInvitation", async({ username, shortId }, thunkApi) => {
  if (!username || !shortId) {
    return thunkApi.rejectWithValue("用户名和用户ID不能为空")
  }
  try {
    const response = await api.post(`/friend/send`, { username, shortId })
    // 直接返回响应体即可，不需要返回整个Axios响应对象
    return response.data;
  } catch (error) {
    // Axios抛出的错误对象中，error.response字段存放了服务端返回的完整响应
    // 4xx/5xx场景下的状态码、返回内容都存在这个字段里
    const errMsg = error.response?.data?.message || error.response?.data || error.message || "发送邀请失败"
    // 必须调用rejectWithValue返回错误，才会进入rejected状态
    return thunkApi.rejectWithValue(errMsg)
  }
})

2. （可选优化）统一服务端错误返回格式 #

你现在服务端404场景直接返回字符串、catch块直接返回error对象，建议统一为JSON格式，避免前端解析响应出错：

// 服务端controller代码
try {
  const user = await findUser({
    // 你的查询参数
  });

  if (!user) {
    return res.status(404).json({ message: 'No user found!' }) 
  }
          
  const response = await friendService.sendInvitation({
    // 你的请求参数
  });
           
  res.json(response);
} catch (error) {
  res.status(400).json({ message: error.message || "请求处理失败" });
}

3. 在切片中接收rejected状态的错误信息 #

在extraReducers中配置rejected回调，即可拿到你透传的错误提示：

const friendsSlice = createSlice({
  name: "friends",
  initialState: {
    sendInviteLoading: false,
    sendInviteError: null
  },
  reducers: {
    // 你的普通reducer逻辑
  },
  extraReducers: (builder) => {
    builder
      .addCase(sendInvitation.pending, (state) => {
        state.sendInviteLoading = true
        state.sendInviteError = null
      })
      .addCase(sendInvitation.fulfilled, (state, action) => {
        state.sendInviteLoading = false
        // 处理邀请发送成功的逻辑，action.payload就是接口返回的成功数据
      })
      .addCase(sendInvitation.rejected, (state, action) => {
        state.sendInviteLoading = false
        // action.payload就是你通过rejectWithValue传过来的错误信息
        state.sendInviteError = action.payload
      })
  }
})

补充说明：浏览器网络面板能看到404响应是正常现象——请求已经成功发送到服务端，服务端也确实返回了对应内容，只是Axios默认把非2xx响应当作错误抛出，你之前没有正确读取错误对象里的响应内容，才会出现拿不到错误提示的问题。

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