学习使用Fetch API获取数据：JSON转换与控制台输出问题

问题描述 #

我正通过在线教程学习使用Fetch获取数据，目前已有可运行的组件代码如下：

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Fetch API</h1>
<h2>The fetch() Method</h2>
<p id="demo">Fetch a file to change this text.</p>

<script>
fetch ("https://gbfs.citibikenyc.com/gbfs/en/station_information.json")
.then(x => x.text())
.then(y => document.getElementById("demo").innerHTML = y);
</script>

</body>
</html>

我的下一目标是将获取到的数据转换为JSON，并将该JSON数据打印到浏览器控制台。我将脚本修改为以下内容，但未得到预期结果，请问如何修改代码才能实现JSON对象的输出？

<script>
fetch ("https://gbfs.citibikenyc.com/gbfs/en/station_information.json")
.then(file => file.json())
.then(data => console.log(data));
</script>

解决方案 #

你的核心代码逻辑是正确的，未得到预期结果通常是以下两个原因导致：

1. 未打开浏览器控制台：按F12或Ctrl+Shift+I（Windows/Linux）、Cmd+Opt+I（Mac）打开开发者工具，切换到「控制台（Console）」标签页后刷新页面，就能看到打印的JSON对象。
2. 缺少错误捕获机制：Fetch API仅在网络彻底失败时触发reject，若返回的HTTP状态码异常（如404、500）或JSON格式错误，file.json()会抛出异常，但原代码未处理这类异常，导致错误被静默忽略，无任何输出。

修改后的完整代码（包含错误处理与状态校验）：

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Fetch API</h1>
<h2>The fetch() Method</h2>
<p id="demo">Fetch a file to change this text.</p>

<script>
fetch("https://gbfs.citibikenyc.com/gbfs/en/station_information.json")
  .then(response => {
    // 校验HTTP响应状态是否正常
    if (!response.ok) {
      throw new Error(`HTTP错误！状态码：${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log("获取到的JSON数据：", data);
    // 可选：在页面显示数据概览，方便直观验证
    document.getElementById("demo").textContent = `已成功获取${data.data.stations.length}个站点信息，详情请查看控制台`;
  })
  .catch(error => {
    console.error("请求或解析出错：", error);
    document.getElementById("demo").textContent = `出错了：${error.message}`;
  });
</script>

</body>
</html>

关键说明 #

• response.ok校验：确保只处理状态码在200-299范围内的有效响应，避免解析错误页面的非JSON内容。
• catch()异常捕获：覆盖网络错误、JSON解析错误、HTTP状态错误等所有异常场景，便于调试排查问题。
• 控制台交互：打印的JSON对象可点击展开，查看内部嵌套的详细数据结构。

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