如何在RTK Query中定义全局错误处理器

当然可以实现全局错误捕获，下面是两种常用的方案：

方法一：包装 fetchBaseQuery 实现全局拦截 #

这是最直接的方式，所有请求都会经过baseQuery，我们在它外面套一层函数，统一处理所有请求错误：

// 定义全局错误处理函数，写你的通用逻辑
const handleGlobalError = (error) => {
  console.error('全局捕获请求错误:', error);
  // 示例：根据状态码做通用处理
  if (error.status === 401) {
    // 执行登出、跳转登录页等逻辑
  } else if (error.status === 500) {
    // 提示服务器异常
  }
};

// 包装原有的 fetchBaseQuery
const baseQueryWithErrorHandling = async (args, api, extraOptions) => {
  const result = await fetchBaseQuery({ baseUrl: "https://some-url" })(args, api, extraOptions);
  
  // 只要请求返回错误，就调用全局处理函数
  if (result.error) {
    handleGlobalError(result.error);
  }
  
  return result;
};

// 替换原来的 baseQuery
export const myApi = createApi({
  reducerPath: "myApi",
  baseQuery: baseQueryWithErrorHandling,
  endpoints: (builder) => ({
    getX: builder.query<ResponseX, null>({
      query: () => ({ url: "getX" }),
      // 可选：保留端点自己的错误处理（全局处理后还能加额外逻辑）
      async onQueryStarted: (args, { queryFulfilled }) => {
        try {
          const { data } = await queryFulfilled;
        } catch (err) {
          // 端点专属错误逻辑
        }
      }
    }),
    getY: builder.query<ResponseY, null>({
      query: () => ({ url: "getY" })
      // 不需要再写重复的错误捕获代码了
    }),
    // 其他端点...
  })
});

这种方式会覆盖所有query和mutation的错误，如果个别端点需要特殊处理，还可以在自己的onQueryStarted（query）或onError（mutation）里补充逻辑，不会和全局处理冲突。

方法二：通过 Redux Middleware 监听错误 #

如果需要和其他Redux逻辑联动，或者更细粒度地监听错误，可以用自定义中间件：

import { createListenerMiddleware, isRejectedWithValue } from '@reduxjs/toolkit';

// 创建监听中间件
const rtkQueryErrorMiddleware = createListenerMiddleware();

// 监听所有RTK Query的错误action
rtkQueryErrorMiddleware.startListening({
  matcher: isRejectedWithValue,
  effect: async (action) => {
    // action.payload 就是错误对象
    handleGlobalError(action.payload);
    
    // 可选：根据action类型区分不同端点
    if (action.type.endsWith('/getX/rejected')) {
      // 针对getX的额外处理
    }
  }
});

// 在Store配置中添加这个中间件
export const store = configureStore({
  reducer: {
    [myApi.reducerPath]: myApi.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware()
      .concat(myApi.middleware)
      .concat(rtkQueryErrorMiddleware.middleware),
});

这种方式更灵活，能监听所有Redux中被拒绝的action，不仅限于RTK Query的请求错误。

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