RTK Query 默认将 200–299 范围内的 HTTP 状态均视为成功（isSuccess: true），导致无法区分 200 与 204 等语义不同的响应。本文详解如何通过自定义 baseQuery 捕获原始 HTTP 状态码，并在组件中安全读取。
rtk query 默认将 200–299 范围内的 http 状态均视为成功（`issuccess: true`），导致无法区分 200 与 204 等语义不同的响应。本文详解如何通过自定义 `basequery` 捕获原始 http 状态码，并在组件中安全读取。
在 RTK Query 中，query 的执行结果（如 isSuccess、data）由 baseQuery 的返回值决定，而标准的 fetchBaseQuery 会将所有 2xx 响应统一标记为 fulfilled —— 这意味着 HTTP 状态码本身不会直接暴露在 query hook 的返回状态中。但幸运的是，RTK Query 提供了元数据（meta）机制，允许你在自定义 baseQuery 中将原始 Response 对象（含 status、statusText、headers 等）注入到结果中。
✅ 正确做法：自定义 baseQuery 并透传 status 到 meta
你需要封装 fetchBaseQuery，在响应返回前提取并附加状态码：
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
// 自定义 baseQuery：确保 status 被写入 meta.response
const baseQueryWithStatus = fetchBaseQuery({
baseUrl: 'https://your-api.com/',
// 可选：添加统一请求头、超时等配置
});
const customBaseQuery = async (args: any, api: any, extraOptions: any) => {
const result = await baseQueryWithStatus(args, api, extraOptions);
// ✅ 关键：将原生 Response 对象（含 status）挂载到 meta 中
if (result.meta?.response) {
result.meta.httpStatus = result.meta.response.status;
result.meta.httpStatusText = result.meta.response.statusText;
}
return result;
};
export const api = createApi({
reducerPath: 'api',
baseQuery: customBaseQuery,
endpoints: (builder) => ({
initUser: builder.query({
query: () => `${API_USER}`,
// 可选：对 204 做特殊处理（如强制 data = undefined）
transformResponse: (response: any, meta: any) => {
if (meta?.httpStatus === 204) return undefined; // 或自定义空对象
return response;
}
})
})
});
? 在组件中读取 HTTP 状态码
使用生成的 hook 时，可通过 currentData、isSuccess 配合 meta 获取状态码：
function UserInit() {
const { data, isSuccess, isError, currentData, meta } = useInitUserQuery();
useEffect(() => {
if (isSuccess && meta) {
console.log('HTTP Status Code:', meta.httpStatus); // ✅ 如 200 或 204
console.log('Status Text:', meta.httpStatusText);
if (meta.httpStatus === 204) {
console.log('No content returned — handle empty response');
// 例如：跳转、清空表单、显示提示等
}
}
}, [isSuccess, meta]);
if (isError) return <div>Failed to load user</div>;
if (!isSuccess) return <div>Loading...</div>;
return <div>User initialized: {data ? 'with data' : 'no content (204)'}</div>;
}
⚠️ 注意事项：
- meta 字段仅在请求完成（fulfilled/rejected）后存在，不可在 isLoading 阶段访问；
- 若服务端返回 204，通常无响应体，data 为 undefined（或 null），此时务必检查 meta.httpStatus 而非仅依赖 data；
- 不要修改 meta 的原始结构（如 meta.response 是只读的），推荐写入新字段（如 meta.httpStatus）以确保兼容性；
- 如需全局拦截特定状态码（如 401 自动登出），可在 customBaseQuery 内统一处理，避免每个 endpoint 重复逻辑。
通过这一模式，你既能保持 RTK Query 的声明式数据流优势，又能精准响应不同 HTTP 语义，真正实现“按状态驱动行为”的健壮 API 集成。
