如何在Redux Toolkit Query的baseQuery中添加请求与响应拦截器

要在RTK Query里实现类似Axios的请求/响应拦截（包括错误时的拒绝处理），你可以通过**包装fetchBaseQuery**来扩展逻辑，而不是直接使用默认的baseQuery。下面是具体实现步骤：

1. 自定义带拦截逻辑的BaseQuery #

首先保留你原有的fetchBaseQuery配置，然后用自定义函数包裹它，添加请求前处理、响应后处理以及错误拦截逻辑：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import UTILS from './path-to-your-utils';

// 基础的fetchBaseQuery配置
const baseQuery = fetchBaseQuery({
  baseUrl: process.env.REACT_APP_BASE_API_URL,
  prepareHeaders: (headers, { getState }) => {
    const token = UTILS.getCurrentUser();
    if (token) {
      headers.set("authorization", token.token);
    }
    return headers;
  },
});

// 包装后的自定义baseQuery，添加拦截逻辑
const customBaseQuery = async (args, api, extraOptions) => {
  // --- 请求拦截器：发送请求前的处理 ---
  let modifiedArgs = args;
  // 这里可像Axios请求拦截器一样修改请求配置
  // 示例：给所有GET请求追加时间戳参数，避免缓存
  if (typeof args === 'object' && args.method === 'GET') {
    modifiedArgs = {
      ...args,
      params: {
        ...args.params,
        _t: Date.now()
      }
    };
  }

  try {
    // 发送请求
    const result = await baseQuery(modifiedArgs, api, extraOptions);

    // --- 响应拦截器：处理响应结果/错误 ---
    if (result.error) {
      // 响应错误时的统一处理（比如打印日志、token过期跳转等）
      console.error('API请求出错:', result.error);
      // 和Axios拦截器一致，返回拒绝的Promise
      return Promise.reject(result.error);
    }

    // 响应成功时的统一处理（比如转换数据格式）
    if (result.data) {
      // 示例：假设后端返回结构是{ code: 200, data: ... }，只取data部分
      result.data = result.data.data || result.data;
    }

    return result;
  } catch (requestError) {
    // 捕获请求发送阶段的错误（比如网络异常、参数错误等）
    console.error('请求发送失败:', requestError);
    return Promise.reject(requestError);
  }
};

2. 更新apiSlice的baseQuery #

把原apiSlice里的baseQuery替换成上面定义的customBaseQuery：

export const apiSlice = createApi({
  reducerPath: "api",
  baseQuery: customBaseQuery, // 使用自定义的baseQuery
  endpoints: (builder) => ({}),
});

关键说明 #

• 请求拦截：调用baseQuery前，可自由修改请求参数（url、method、body、params等），和Axios请求拦截器的config处理逻辑一致。
• 响应拦截：请求完成后，通过result.error判断处理响应错误，返回Promise.reject()实现和Axios一样的错误拒绝行为；成功响应可统一转换数据格式。
• 全局错误捕获：用try-catch包裹请求发送逻辑，捕获网络错误、参数错误等请求阶段异常，同样返回拒绝的Promise。

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