如何通过Axios获取后端错误并在React前端展示

我想把后端返回的错误（比如“Maximum of 3 trackers per user”）展示在JSX页面上，目前的前后端代码如下，尝试过try/catch但没理清整个流程，希望得到完整的实现方案。

前端调用代码 #

dispatch(createGoal({ values }))

Goalslice中的createAsyncThunk代码 #

export const createGoal = createAsyncThunk(
  'goals/create',
  async (goalData, thunkAPI) => {
    try {
      const token = thunkAPI.getState().auth.user.token
      return await goalService.createGoal(goalData, token)
    } catch (error) {
      const message =
        (error.response &&
          error.response.data &&
          error.response.data.message) ||
        error.message ||
        error.toString()
      return thunkAPI.rejectWithValue(message)
    }
  }
)

GoalService代码 #

const createGoal = async (goalData, token) => {
  const config = {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  }

  const response = await axios.post(API_URL, goalData, config)

  return response.data
}

后端GoalController代码 #

const setGoal = asyncHandler(async (req, res) => {
  const goals = await Goal.find({ user: req.user.id })
  var count = Object.keys(goals).length
  if(count >2){
    res.status(400)
    throw new Error('Maximum of 3 trackers per user')
  }
  if (!req.body.values) { 
    res.status(400) 
    throw new Error('Please add a date field') 
  }
  console.log(req.body.values.dates)
  const goal = await Goal.create({
    values: req.body.values.dates, 
    permit: req.body.values.permits,
    numpermit: req.body.values.num,
    user: req.user.id,
  })

  res.status(200).json(goal)
})

自定义错误处理器代码 #

const errorHandler = (err, req, res, next) => { 
  const statusCode = res.statusCode ? res.statusCode : 500 

  res.status(statusCode)

  res.json({
    message: err.message,
    stack: process.env.NODE_ENV === 'production' ? null : err.stack, 
  })
}

module.exports = { 
  errorHandler,
}

实现前端错误展示的完整步骤 #

1. 在Redux切片中处理rejected状态 #

需要在Goalslice的extraReducers里监听createGoal.rejected状态，把错误信息存入state：

import { createSlice } from '@reduxjs/toolkit'
import { createGoal } from './goalsThunks'

const initialState = {
  goals: [],
  error: null, // 新增错误状态字段
  isLoading: false
}

const goalSlice = createSlice({
  name: 'goals',
  initialState,
  reducers: {
    // 添加清除错误的action
    clearError: (state) => {
      state.error = null
    }
  },
  extraReducers: (builder) => {
    builder
      .addCase(createGoal.pending, (state) => {
        state.isLoading = true
        state.error = null // 请求开始时清空旧错误
      })
      .addCase(createGoal.fulfilled, (state, action) => {
        state.isLoading = false
        state.goals.push(action.payload)
      })
      .addCase(createGoal.rejected, (state, action) => {
        state.isLoading = false
        state.error = action.payload // 存入rejectWithValue传递的错误信息
      })
  }
})

export const { clearError } = goalSlice.actions
export default goalSlice.reducer

2. 在JSX组件中获取错误状态并展示 #

通过useSelector获取Redux中的error状态，在页面上渲染错误提示：

import { useDispatch, useSelector } from 'react-redux'
import { createGoal, clearError } from '../features/goals/goalsSlice'
import { useState } from 'react'

const GoalForm = () => {
  const dispatch = useDispatch()
  const { error, isLoading } = useSelector((state) => state.goals)
  const [values, setValues] = useState({ /* 你的表单初始化数据 */ })

  const handleSubmit = (e) => {
    e.preventDefault()
    dispatch(clearError()) // 提交前清除旧错误
    dispatch(createGoal({ values }))
  }

  return (
    <div>
      {/* 错误提示区域 */}
      {error && (
        <div className="alert alert-danger">
          {error}
          <button 
            onClick={() => dispatch(clearError())} 
            className="btn-close ms-2"
            aria-label="Close"
          ></button>
        </div>
      )}
      
      <form onSubmit={handleSubmit}>
        {/* 你的表单输入组件 */}
        <button type="submit" disabled={isLoading}>
          {isLoading ? '提交中...' : '创建目标'}
        </button>
      </form>
    </div>
  )
}

export default GoalForm

3. 验证流程正确性 #

你的后端错误处理器已经正确返回包含message字段的错误数据，前端的createAsyncThunk也正确提取了error.response.data.message，这部分无需修改。当用户创建第4个目标时，后端会返回400状态码和对应错误信息，前端会捕获并存入Redux的error状态，最终在组件中展示。

额外注意事项 #

• 每次发起请求时清空错误状态，避免旧错误持续显示
• 给提交按钮添加loading状态，防止重复提交
• 错误提示样式可根据项目需求自定义（比如改用toast组件）

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