使用SpaceX开源API遇问题：无法读取ReadableStream，期望JSON响应

你的问题核心在于fetch请求后未解析响应流——fetch返回的Response对象是包含ReadableStream的容器，并非直接的JSON数据，必须调用.json()方法读取并解析这个流才能拿到可用的JSON格式数据。

修改后的可运行代码示例：

// 定义异步请求函数
const fetchRockets = async () => {
  try {
    const response = await fetch('https://api.spacexdata.com/v4/rockets', {
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      credentials: "same-origin"
    });
    // 关键步骤：调用.json()解析响应流为JSON对象
    const rocketData = await response.json();
    console.log(rocketData); // 此时可正常获取JSON格式数据
    // 可将数据存入React状态，比如 setRockets(rocketData)
  } catch (error) {
    console.error('请求或解析失败:', error);
  }
};

// 在React函数组件中，通过useEffect触发请求
useEffect(() => {
  fetchRockets();
}, []);

关键说明： #

• .json()方法是异步操作，必须搭配await等待解析完成
• 务必添加错误捕获逻辑，处理网络请求失败或JSON解析错误的场景
• React组件顶层不能直接执行await，需将异步请求放在useEffect钩子或自定义异步函数中

至于浏览器控制台能看到数据，是因为开发者工具的Network面板会自动帮你解析响应流，但代码层面必须手动完成这一步。

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