RTK Query全局错误处理：fetchBaseQuery与Axios自定义查询实现

问题背景 #

我正在使用Redux Toolkit (RTK) Query的自定义Axios base query，运行正常。现需实现自动重授权功能，参考官方文档中fetchBaseQuery的示例时发现：fetchBaseQuery会将错误响应标记为fulfilled而非rejected（自定义Axios查询则是rejected），导致查询/结果中的isError属性为false，无法实现全局自动拒绝错误响应的需求。

具体问题 #

1. 自定义Axios base query是如何设置rejected状态的？如何让默认fetchBaseQuery实现相同的全局错误拒绝行为？
2. 有没有示例展示如何在自定义Axios base query中拦截响应状态（如401）并实现自动重授权？是否可通过Axios拦截器实现，最佳实践是什么？

解答 #

问题1：错误状态的控制与fetchBaseQuery的适配 #

• 自定义Axios base query的rejected状态逻辑：Axios本身在收到4xx/5xx类HTTP响应时会抛出异常，如果你在自定义base query中没有主动捕获并转换这个异常，RTK Query会将这个Promise的rejected状态直接映射为查询的rejected状态，此时isError会被设为true。
• 让fetchBaseQuery实现相同行为：fetchBaseQuery默认会把所有HTTP响应（包括错误状态码）都包装为fulfilled结果，仅当出现网络层面的错误时才会进入rejected。要修改这个行为，只需配置validateStatus选项，指定哪些状态码算成功响应：

const baseQuery = fetchBaseQuery({
  baseUrl: '/api',
  // 仅2xx状态码视为成功，其余均标记为错误
  validateStatus: (status) => status >= 200 && status < 300,
});

配置后，4xx/5xx响应会被fetchBaseQuery判定为错误，进入rejected状态，isError属性变为true，和自定义Axios query的行为一致。

问题2：自定义Axios base query的401拦截与自动重授权 #

完全可以通过Axios拦截器实现，这也是业内的最佳实践。以下是完整的实现示例：

步骤1：配置带拦截器的Axios实例

import axios from 'axios';
// 替换为你项目中实际的token管理方法
import { getToken, refreshToken, setToken, clearToken } from './authUtils';

// 创建独立的Axios实例，避免污染全局Axios配置
const axiosInstance = axios.create({
  baseURL: '/api',
});

// 请求拦截器：自动在请求头添加token
axiosInstance.interceptors.request.use(
  (config) => {
    const token = getToken();
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// 响应拦截器：捕获401并自动刷新token重发请求
axiosInstance.interceptors.response.use(
  (response) => response,
  async (error) => {
    const originalRequest = error.config;
    // 标记已重试，避免无限循环触发401拦截
    if (error.response?.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;
      try {
        // 调用刷新token接口
        const newToken = await refreshToken();
        // 更新本地存储的token
        setToken(newToken);
        // 给原请求带上新token并重新发起
        originalRequest.headers.Authorization = `Bearer ${newToken}`;
        return axiosInstance(originalRequest);
      } catch (refreshErr) {
        // 刷新失败：清除无效token并跳转登录页
        clearToken();
        window.location.href = '/login';
        return Promise.reject(refreshErr);
      }
    }
    return Promise.reject(error);
  }
);

步骤2：基于Axios实例创建RTK Query的base query

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

const axiosBaseQuery =
  ({ baseUrl } = { baseUrl: '' }) =>
  async ({ url, method, data, params, headers }) => {
    try {
      const result = await axiosInstance({
        url: baseUrl + url,
        method,
        data,
        params,
        headers,
      });
      return { data: result.data };
    } catch (axiosError) {
      // 将Axios错误转换为RTK Query要求的格式
      return {
        error: {
          status: axiosError.response?.status,
          data: axiosError.response?.data || axiosError.message,
        },
      };
    }
  };

// 创建API切片
export const api = createApi({
  baseQuery: axiosBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    // 示例接口：获取文章列表
    getPosts: builder.query({
      query: () => '/posts',
    }),
    // 其他接口定义...
  }),
});

最佳实践要点

• 使用独立的Axios实例配置拦截器，避免影响项目中其他Axios的使用
• 重发请求时添加_retry标记，防止401错误无限循环
• 刷新token失败后，务必清除本地无效token并引导用户重新登录
• 在自定义base query中，要将Axios的错误结构转换为RTK Query预期的格式（返回包含error字段的对象）

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