React-Query调用delete接口返回204状态码时useMutation仍报错如何解决？

问题根因 #

报错本质是HTTP 204 No Content状态码的响应特性和你封装的api.remove方法的响应解析逻辑不匹配导致：

• 204状态码的HTTP规范要求响应不能包含响应体，你在Insomnia测试正常是因为工具不会强制将空响应解析为JSON
• 你的api.remove内部默认对所有响应执行了response.json()解析操作，当响应体为空时，JSON解析就会抛出Unexpected end of JSON input错误。哪怕删除操作在服务端已经执行成功，这个解析错误依然会被抛出，且会被React Query判定为请求失败，无法触发你定义的onSuccess回调。

修复方案 #

你可以任选以下一种方案适配：

1. 调整API封装层的响应解析逻辑，对204状态码做特殊处理，跳过JSON解析：

// api.remove内部的请求逻辑修改参考，以fetch封装为例
const response = await fetch(requestUrl, requestOptions);
if (response.status === 204) {
  return null; // 204无响应体，直接返回空值即可
}
return response.json();

如果你的API是基于Axios封装，可以给DELETE请求单独添加配置：

// axios请求配置
axios.delete(requestUrl, {
  // 遇到204状态码直接返回，不解析响应体
  transformResponse: (data, headers, status) => {
    if (status === 204) return null;
    return JSON.parse(data);
  }
})

2. 如果你不想修改全局API封装逻辑，也可以在useMutation中单独处理该解析错误：

const { isLoading, mutate } = useMutation(
  async () => {
    try {
      return await api.remove(path, item.id);
    } catch (err) {
      // 判定为204对应的空JSON解析错误时，不抛出错误，判定为请求成功
      if (err instanceof SyntaxError && err.message.includes('Unexpected end of JSON input')) {
        return null;
      }
      // 其他类型错误正常抛出
      throw err;
    }
  },
  {
    onSuccess: () => {
      openModal();
      refetchData();
    },
  }
);

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