使用fetch请求API时，如何在React中获取300状态的JSON响应体？

你抛出TypeError的核心原因是错误调用了ReadableStream的json()方法：e.response.body是ReadableStream类型，它本身没有json()方法；json()是Response对象的内置方法，应该直接在e.response上调用。

另外说明：fetch API默认不会对300这类非2xx状态码抛出错误，你的代码能进入catch块，大概率是手动添加了res.ok的判断，并抛出了携带Response对象的错误。

修正后的完整代码示例：

try {
  const res = await fetch('/api/user');
  // 手动校验响应状态，非2xx时抛出携带Response的错误
  if (!res.ok) {
    const error = new Error(`请求失败，状态码：${res.status}`);
    error.response = res;
    throw error;
  }
  const data = await res.json();
  // 处理200状态的响应数据
} catch(e) {
  // 仅当错误携带Response对象时，解析响应体
  if (e.response) {
    try {
      const errorData = await e.response.json();
      console.log(errorData); // 此处可获取300状态返回的{ users: ... }数据
    } catch(parseError) {
      console.error('解析错误响应体失败:', parseError);
    }
  } else {
    console.error('网络错误:', e);
  }
}

关键注意事项： #

• 不要直接操作e.response.body，始终使用Response对象的json()方法读取并解析响应体。
• 在catch块内嵌套try/catch，避免因API返回非JSON格式的错误响应体时，再次抛出错误中断代码执行。
• 抛出错误时必须将Response对象挂载到error实例上，才能在catch块中访问到完整的响应信息。

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