如何使用RTK Query通过中间件统一处理错误和成功通知？

RTK Query 提供了和错误态匹配对应的成功态匹配能力，可通过两种常用方案实现全局统一的成功响应处理：

方案1：自定义全局中间件（可复用现有错误处理逻辑） #

和你当前使用 isRejectedWithValue 处理错误的逻辑同层实现即可，核心通过api.util.matchFulfilled匹配所有RTK Query接口的成功响应action：

import { configureStore, createListenerMiddleware } from '@reduxjs/toolkit'
import { api } from './你的api实例文件路径'

// 创建通用监听器中间件
const globalQueryListener = createListenerMiddleware()
globalQueryListener.startListening({
  // 同时匹配成功态、带返回值的错误态
  matcher: (action) => api.util.matchFulfilled(action) || api.util.matchRejectedWithValue(action),
  effect: (action) => {
    // 原有错误处理逻辑
    if (api.util.matchRejectedWithValue(action)) {
      const { status, data } = action.payload
      // 你的原有错误处理逻辑，比如弹错误提示、401跳转登录等
      return
    }
    // 新增成功处理逻辑
    if (api.util.matchFulfilled(action)) {
      const responseData = action.payload
      // 此处编写通用成功逻辑，比如弹出后端返回的成功提示、同步全局用户状态等
      if (responseData?.message) {
        console.log('通用成功提示：', responseData.message)
      }
    }
  }
})

// 注册中间件到store
export const store = configureStore({
  reducer: {
    [api.reducerPath]: api.reducer
  },
  middleware: (getDefaultMiddleware) => 
    getDefaultMiddleware().concat(api.middleware, globalQueryListener.middleware)
})

如果不需要使用listenerMiddleware，也可以用原生Redux自定义中间件实现，匹配逻辑完全一致。

方案2：全局配置 onQueryStarted（RTK Query 原生轻量方案） #

无需额外新增中间件，直接在你创建的api实例上全局增强所有端点的生命周期逻辑即可，适合只需要处理RTK Query请求的场景：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

export const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: () => ({}),
})

// 全局增强所有端点的onQueryStarted逻辑
api.enhanceEndpoints({
  endpoints: (endpoints) => {
    Object.values(endpoints).forEach((endpoint) => {
      const originalOnQueryStarted = endpoint.onQueryStarted
      endpoint.onQueryStarted = async (arg, api) => {
        // 保留端点自定义的onQueryStarted逻辑
        if (originalOnQueryStarted) await originalOnQueryStarted(arg, api)
        try {
          const { data } = await api.queryFulfilled
          // 此处编写通用成功处理逻辑
          if (data?.code === 200 && data?.msg) {
            console.log('请求成功提示：', data.msg)
          }
        } catch (err) {
          // 此处也可以同步实现通用错误处理，和你现有逻辑对齐
        }
      }
    })
  }
})

适配说明 #

如果部分端点不需要走通用成功/错误处理，可以在定义端点时通过extraOptions加标识跳过：

getUserInfo: builder.query({
  query: () => '/user/info',
  extraOptions: {
    skipGlobalSuccessHandle: true // 跳过通用成功处理
  }
})

处理逻辑中新增对应判断即可。

内容的提问来源于stack exchange，提问作者Anji