为什么我的 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”警告。这意味着它也总是返回一个已解决的 Promise，其中包含已调度的操作。

根据我们的文档，如果您想根据调度在组件级别执行操作try/catch，则需要“解开”返回的承诺。payload如果已调度操作，则这将返回；如果已调度操作，fulfilled则将重新抛出错误。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