为什么我的 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 always 在内部处理所有抛出的错误 - 否则你会在控制台中看到很多“未捕获的被拒绝的承诺”警告。这意味着它也总是返回一个已解决的 Promise，其中包含 已调度的操作。

根据我们的文档，如果您想根据调度在组件级别执行try/catch，您需要“解包”返回的承诺。如果发送了 fulfilled 操作，这将返回 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