React自定义useHttp Hook：GET正常POST调用response.json()报错

你的问题核心在于：response.json() 会尝试解析HTTP响应体的内容，而你的服务器在POST请求成功后，返回的响应体是纯文本 "OK"（甚至可能是不带引号的 OK），这不是合法的JSON格式，所以解析时抛出了错误。

注意：response.statusText 是HTTP状态码对应的描述文本（比如200状态码默认就是"OK"），和服务器返回的响应体是完全独立的两个东西——你看到的"OK"只是状态描述，而真正被json()解析的是服务器主动返回的响应体内容。

解决方法 #

方案1：根据响应类型动态处理解析逻辑 #

修改你的自定义useHttp Hook，先检查响应的Content-Type头，再决定用json()还是text()解析：

const useHttp = () => {
  const sendRequest = async (url, method = 'GET', body = null, headers = {}) => {
    try {
      const response = await fetch(url, {
        method,
        body: body ? JSON.stringify(body) : null,
        headers: body ? { 'Content-Type': 'application/json', ...headers } : headers
      });

      // 先获取响应内容类型
      const contentType = response.headers.get('Content-Type');
      let data;
      
      // 区分JSON和文本响应
      if (contentType?.includes('application/json')) {
        data = await response.json();
      } else {
        data = await response.text();
      }

      if (!response.ok) {
        throw new Error(data.message || data || '请求失败');
      }

      return data;
    } catch (error) {
      throw error;
    }
  };

  return { sendRequest };
};

方案2：直接使用text()解析POST响应 #

如果你确定POST请求的服务器只会返回文本（比如"OK"），可以在POST请求时单独处理，跳过json()：

// 在调用sendRequest时，或者在Hook内部针对POST方法做判断
const handlePost = async () => {
  try {
    const response = await fetch('/your-post-url', {
      method: 'POST',
      body: JSON.stringify(yourData),
      headers: { 'Content-Type': 'application/json' }
    });
    
    if (!response.ok) throw new Error('请求失败');
    
    // 用text()替代json()
    const data = await response.text();
    console.log(data); // 输出"OK"
  } catch (err) {
    console.error(err);
  }
};

方案3：协调后端返回合法JSON #

最规范的方式是和后端开发沟通，让他们返回合法的JSON格式响应，比如：

{"message": "OK"}

这样response.json()就能正常解析，不会报错。

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