错误处理

概述

如果你在使用 fetchBaseQuery 的查询或变异过程中出现错误，它将在相应钩子的 error 属性中返回。当这种情况发生时，组件将重新渲染，你可以根据错误数据显示适当的用户界面（如果需要的话）。

错误显示示例

查询错误

function PostsList() {
  const { data, error } = useGetPostsQuery()

  return (
    <div>
      {error.status} {JSON.stringify(error.data)}
    </div>
  )
}

变异错误

function AddPost() {
  const [addPost, { error }] = useAddPostMutation()

  return (
    <div>
      {error.status} {JSON.stringify(error.data)}
    </div>
  )
}

提示

如果你需要在变异后立即访问错误或成功的有效载荷，你可以链式调用 .unwrap()。

使用 .unwrap

addPost({ id: 1, name: 'Example' })
  .unwrap()
  .then((payload) => console.log('fulfilled', payload))
  .catch((error) => console.error('rejected', error))

手动选择错误

function PostsList() {
  const { error } = useSelector(api.endpoints.getPosts.select())

  return (
    <div>
      {error.status} {JSON.stringify(error.data)}
    </div>
  )
}

自定义 baseQuery 的错误

响应是作为 data 还是 error 返回的，取决于提供的 baseQuery。

最终，你可以选择你喜欢的任何库与你的 baseQuery 一起使用，但重要的是你返回正确的响应格式。如果你还没有尝试过 fetchBaseQuery，那就给它一个机会！否则，查看 自定义查询 以获取如何更改返回错误的信息。

在宏观层面处理错误

你可以通过很多方式来管理你的错误，在某些情况下，你可能希望为任何异步错误显示一个通用的弹出通知。由于 RTK Query 是基于 Redux 和 Redux-Toolkit 构建的，你可以轻松地为此目的向你的存储添加中间件。

提示

Redux Toolkit 有 动作匹配工具，我们可以利用它们进行额外的自定义行为。

错误捕获中间件示例

import { isRejectedWithValue } from '@reduxjs/toolkit'
import type { MiddlewareAPI, Middleware } from '@reduxjs/toolkit'
import { toast } from 'your-cool-library'

/**
 * 记录警告并显示一个弹出通知！
 */
export const rtkQueryErrorLogger: Middleware =
  (api: MiddlewareAPI) => (next) => (action) => {
    // RTK Query 在底层使用了 redux-toolkit 的 `createAsyncThunk`，所以我们能够使用这些匹配器！
    if (isRejectedWithValue(action)) {
      console.warn('We got a rejected action!')
      toast.warn({
        title: '异步错误！',
        message:
          'data' in action.error
            ? (action.error.data as { message: string }).message
            : action.error.message,
      })
    }

    return next(action)
  }