Redux Toolkit中如何为RTK Query配置全局400错误跳转处理逻辑？

RTK Query 全局400错误重定向配置方案 #

可以通过封装fetchBaseQuery实现全局错误拦截逻辑，所有通过该userApi实例发起的请求都会经过该错误处理逻辑，匹配400状态码时自动触发重定向，修改后的完整配置如下：

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

const headers = {
  Accept: 'application/json',
  'Content-Type': 'application/json',
};

const baseUrl = '/api';
const redirectTarget = '你的外部站点跳转地址'; // 替换为实际要跳转的地址

const createRequest = (url, method) => ({ url, method, headers });

// 自定义baseQuery添加全局拦截逻辑
const customBaseQuery = async (args, api, extraOptions) => {
  const requestResult = await fetchBaseQuery({ baseUrl })(args, api, extraOptions);
  // 匹配400错误执行重定向
  if (requestResult.error && requestResult.error.status === 400) {
    window.location.href = redirectTarget;
  }
  return requestResult;
};

export const userApi = createApi({
  reducerPath: 'userApi',
  baseQuery: customBaseQuery, // 替换原有baseQuery配置
  endpoints: (builder) => ({
    getUser: builder.query({
      query: () => createRequest('/user/get', 'GET'),
    }),
  }),
});

export const { useGetUserQuery } = userApi;

补充说明

• 该拦截逻辑对所有挂载到userApi下的查询、变更端点生效，无需单独配置每个请求的错误处理
• 如需拦截更多状态码，直接扩展判断条件即可，比如新增requestResult.error.status === 401处理未授权场景
• 如果你使用的是服务端渲染框架，需要将window.location替换为对应框架的服务端重定向API，客户端渲染场景可直接使用上述写法

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