为什么我的 try catch 块不处理调度错误？

Question

我无法在我的 try catch 块中得到被拒绝的承诺，它的响应总是在 originalPromiseResult

这是我从 API:

获取一些数据的片段

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

这是我的组件：

const dispatch = useDispatch()

const myCallback = async (data) => {
    try {
      const originalPromiseResult = await dispatch(getData(data))
    } catch (error) {
      console.log('error = ', error)
    }
}

Answer 1

createAsyncThunk 总是在内部处理所有抛出的错误——否则你会在控制台中看到很多“未捕获的被拒绝的 Promise”警告。这意味着它也总是 return 一个已解决的 Promise，包含 已调度的操作 。

根据我们的文档，如果您想根据分派在组件级别执行 try/catch，您需要“打开”returned 承诺。如果调度了 fulfilled 操作，这将 return payload，或者如果调度了 rejected 操作，则重新抛出错误

    try {
      const originalPromiseResult = await dispatch(getData(data)).unwrap()
    } catch (error) {
      console.log('error = ', error)
    }

参考：

https://redux-toolkit.js.org/api/createAsyncThunk#unwrapping-result-actions

为什么我的 try catch 块不处理调度错误？

Why doesn't my try catch block handle dispatch error?

dispatch

reactjs

redux