RTK Query DELETE请求执行成功却返回FETCH_ERROR问题排查

问题描述 #

使用RTK Query的DELETE mutation删除数据时，后端已成功执行删除操作，但前端未收到预期的204状态码，反而抛出{"status":"FETCH_ERROR","error":"TypeError: Network request failed"}错误，且PUT/POST请求可正常工作。

核心原因 #

默认的fetchBaseQuery会尝试将所有响应解析为JSON，但HTTP 204状态码的响应没有响应体，此时调用response.json()会触发TypeError，导致RTK Query将请求标记为失败。

解决方案 #

方案1：在mutation中单独处理204响应 #

修改mutation的配置，添加responseHandler来跳过204响应的JSON解析：

addserviceDetails: builder.mutation({
  query: ({ body, method }) => ({
    url: "/my/end/point",
    method,
    body,
    // 自定义响应处理逻辑
    responseHandler: (response) => {
      if (response.status === 204) {
        return Promise.resolve({}); // 返回空对象表示成功
      }
      return response.json(); // 其他正常响应继续解析JSON
    },
  }),
  invalidatesTags: ["services"],
}),

方案2：自定义baseQuery全局处理204响应 #

如果多个mutation都需要处理204，可以封装自定义baseQuery，统一处理这类情况：

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

const customBaseQuery = async (args, api, extraOptions) => {
  const baseQuery = fetchBaseQuery({ baseUrl: "http://10.0.2.2:8000" });
  const result = await baseQuery(args, api, extraOptions);
  
  // 把204状态的错误转为成功结果
  if (result.error && result.error.status === 204) {
    return { data: {} };
  }
  
  return result;
};

// 在创建api slice时使用customBaseQuery
export const authApiSlice = createApi({
  reducerPath: 'authApiSlice',
  baseQuery: customBaseQuery,
  endpoints: (builder) => ({
    // ...你的endpoints
  }),
});

方案3：避免DELETE请求携带请求体（可选） #

虽然HTTP标准允许DELETE带请求体，但部分环境对这种情况的支持不佳。可以将service_id放到URL参数中，去掉请求体：

1. 修改mutation配置：

addserviceDetails: builder.mutation({
  query: ({ params, body, method }) => ({
    url: method === "DELETE" ? `/my/end/point/${params.service_id}` : "/my/end/point",
    method,
    body: method !== "DELETE" ? body : undefined,
  }),
  invalidatesTags: ["services"],
}),

2. 组件中调用：

await deleteserviceMutation({
  params: { service_id: id },
  method: "DELETE",
}).unwrap();

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