reactjs - 为什么我的 try catch block 不处理调度错误？

Question

我无法在我的 try catch block 中得到被拒绝的 promise ，它的响应总是在 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”警告。这意味着它也总是返回一个已解决的 Promise，其中包含已调度的操作。

根据我们的文档，如果您想根据分派(dispatch)在组件级别执行 try/catch，您需要“解包”返回的 promise 。如果分派(dispatch)了 fulfilled 操作，这将返回 payload，或者如果分派(dispatch)了 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