如何在使用RTK Query时捕获HTTP状态码？

因为RTK Query会将200-299范围内的状态码都标记为fulfilled，所以无法直接从查询结果的状态判断具体是200还是204，需要从响应的元数据中提取状态码，以下是几种可行方案：

方案1：在端点的transformResponse中返回状态码 #

利用transformResponse的第二个参数meta（包含原始响应信息），将状态码与接口数据一起返回，这样组件中就能直接获取到具体状态码：

export const api = createApi({
  reducerPath: "api",
  baseQuery: baseQueryWithReauth,
  endpoints: (builder) => ({
    initUser: builder.query({
      query: () => `${API_USER}`,
      transformResponse: (response, meta) => {
        return {
          data: response,
          statusCode: meta.response.status
        };
      },
    }),
  }),
});

使用时，通过useInitUserQuery()返回的data即可拿到statusCode字段，判断是200还是204。

方案2：修改自定义BaseQuery，全局携带状态码 #

如果你的baseQueryWithReauth是基于fetchBaseQuery封装的，可以在BaseQuery层统一附加状态码，避免每个端点重复配置：

const baseQuery = fetchBaseQuery({ baseUrl: "/your-base-url" });

const baseQueryWithReauth = async (args, api, extraOptions) => {
  let result = await baseQuery(args, api, extraOptions);
  
  // 将状态码附加到返回数据中
  if (result.meta?.response) {
    result.data = {
      ...(result.data || {}),
      statusCode: result.meta.response.status
    };
  }

  // 你的重鉴权逻辑（如果有）
  // ...

  return result;
};

这样所有使用该BaseQuery的端点，返回数据都会包含statusCode字段。

方案3：在onQueryStarted中处理状态码逻辑 #

如果不需要在组件中获取状态码，仅需在请求完成后执行对应逻辑，可以使用onQueryStarted钩子：

export const api = createApi({
  reducerPath: "api",
  baseQuery: baseQueryWithReauth,
  endpoints: (builder) => ({
    initUser: builder.query({
      query: () => `${API_USER}`,
      async onQueryStarted(args, { queryFulfilled }) {
        try {
          const { meta } = await queryFulfilled;
          const statusCode = meta.response.status;
          
          if (statusCode === 200) {
            // 处理200状态的逻辑
          } else if (statusCode === 204) {
            // 处理204状态的逻辑
          }
        } catch (error) {
          // 处理请求错误
        }
      },
    }),
  }),
});

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