错误处理

概述

如果你的查询或变异在使用 fetchBaseQuery 时发生错误，它将在相应 hook 的 error 属性中返回。组件将在发生这种情况时重新渲染，你可以在需要时根据错误数据显示相应的 UI。

错误显示示例

查询错误

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'

/**
 * Log a warning and show a toast!
 */
export const rtkQueryErrorLogger: Middleware =
  (api: MiddlewareAPI) => (next) => (action) => {
    // RTK Query uses `createAsyncThunk` from redux-toolkit under the hood, so we're able to utilize these matchers!
    if (isRejectedWithValue(action)) {
      console.warn('We got a rejected action!')
      toast.warn({
        title: 'Async error!',
        message:
          'data' in action.error
            ? (action.error.data as { message: string }).message
            : action.error.message,
      })
    }

    return next(action)
  }