Redux Toolkit中fetchBaseQuery的全局错误处理实现方案

在使用Redux Toolkit的fetchBaseQuery发起API请求时，通常得为每个请求单独检查响应状态、写错误处理逻辑，重复代码多不说，还容易出现处理逻辑不一致的情况。我们需要一套全局集中式的错误处理方案，统一拦截所有API的响应，完成显示错误提示、更新Redux全局错误状态这类操作，以此简化代码、提升可维护性。

你当前代码的问题 #

你写的实现有几个关键问题导致没达到预期：

• 自定义的fetchBaseQueryWithErrorHandler函数签名不对，fetchBaseQuery返回的函数实际接受(args, api, extraOptions)三个参数，你没拿到api参数，也就没法正确分发Redux action
• 直接调用store.dispatch不符合Redux Toolkit的规范，应该用api.dispatch来触发状态更新
• 错误判断逻辑不准确，fetchBaseQuery的响应里，错误情况会被封装在result.error字段里，不是用response.ok来判断

正确的实现方案 #

我们可以通过包装fetchBaseQuery返回的函数，来统一处理所有请求的错误：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import { setError } from './yourErrorSlice'; // 替换成你自己的错误状态slice

// 基础的fetchBaseQuery配置
const baseQuery = fetchBaseQuery({
  baseUrl: '/api',
  // 可添加其他配置：比如credentials: 'include'、自定义headers等
});

// 包装baseQuery，添加全局错误处理逻辑
const baseQueryWithErrorHandling = async (args, api, extraOptions) => {
  // 先执行原有的baseQuery请求
  const result = await baseQuery(args, api, extraOptions);

  // 全局拦截错误
  if (result.error) {
    // 1. 分发action更新全局错误状态
    const errorMsg = result.error.data?.message || result.error.statusText || '请求失败，请稍后重试';
    api.dispatch(setError({
      message: errorMsg,
      status: result.error.status
    }));

    // 2. 可选：根据错误状态码做针对性处理
    switch (result.error.status) {
      case 401:
        // 比如权限过期时，执行登出、跳转登录页操作
        // api.dispatch(logout());
        // window.location.href = '/login';
        break;
      case 500:
        // 服务器错误时的额外处理
        break;
    }
  }

  return result;
};

// 创建API slice，使用带全局错误处理的baseQuery
export const apiSlice = createApi({
  baseQuery: baseQueryWithErrorHandling,
  endpoints: (builder) => ({
    // 这里定义你的API端点
    getExampleData: builder.query({
      query: () => '/example',
    }),
  }),
});

核心要点说明 #

• 响应结构：fetchBaseQuery返回的结果里，成功时会有data字段，错误时会有error字段（包含status状态码、statusText、data后端返回的错误信息等）
• baseQueryApi的作用：api参数提供了dispatch、getState等方法，能直接用来更新Redux状态或者获取当前store的数据，不用直接调用全局store
• 灵活性：全局处理逻辑不会影响单个请求的自定义错误处理，如果某个请求需要特殊逻辑，依然可以在端点的transformResponse或者组件中单独处理
• 一致性：所有API请求的错误都会走这套全局逻辑，保证不同请求的错误处理行为统一

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