为什么我的try catch块无法捕获dispatch触发的createAsyncThunk错误？

问题产生原因 #

• Redux Toolkit 中调用 dispatch 执行 createAsyncThunk 生成的异步 action 时，默认返回的 Promise 不会因 thunk 执行失败抛出异常，无论接口请求成功还是你主动调用 rejectWithValue 返回错误，Promise 都会进入 fulfilled 状态，错误内容只会挂载到返回结果的 payload 中，同时 meta.requestStatus 会标记为 rejected，因此外层的 try catch 无法捕获到错误。
• 另外你的 thunk 代码存在变量名错误：catch 块接收的错误参数名为 err，但打印语句写的是 console.error(e)，会触发未定义变量报错，也会影响错误逻辑的正常执行。

解决方法 #

方案1：使用 unwrap() 转换返回结果（推荐） #

RTK 为异步 action 返回的 Promise 封装了 unwrap() 方法，调用后会自动将 rejectWithValue 返回的内容作为异常抛出，就可以被 try catch 正常捕获，修改组件代码如下：

const dispatch = useDispatch()

const myCallback = async (data) => {
    try {
      const result = await dispatch(getData(data)).unwrap()
      // 此处写请求成功后的处理逻辑
    } catch (error) {
      console.log('error = ', error)
    }
}

同时修正 thunk 里的变量名错误：

export const getData = createAsyncThunk(
  'user/getData',
  async (headers, { rejectWithValue }) => {
    try {
      return await httpService.getData(headers)
    } catch (err) {
      console.error(err) // 修正变量名
      return rejectWithValue(err.response.data)
    }
  }
)

方案2：手动判断返回结果状态 #

如果不想额外抛出异常，也可以直接判断返回结果的状态字段处理逻辑：

const myCallback = async (data) => {
    const actionResult = await dispatch(getData(data))
    if (actionResult.meta.requestStatus === 'rejected') {
      const error = actionResult.payload
      console.log('error = ', error)
      // 错误处理逻辑
    } else if (actionResult.meta.requestStatus === 'fulfilled') {
      const result = actionResult.payload
      // 成功处理逻辑
    }
}

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