使用Fetch API获取JSON文件遇到问题求助

嘿，我懂你碰到的麻烦了——你现在用Fetch拿到的其实是一个Response对象，它只包含响应的元数据（比如状态码、响应头），并不是你要的实际JSON内容。要拿到数据，得先调用这个对象的.json()方法来解析响应体才行。

给你修正后的代码，加了注释说明关键步骤：

'use strict';
fetch('https://www.jasonbase.com/things/wAe3.json')
  .then((response) => {
    // 先校验请求是否成功（避免解析失败的响应体）
    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`);
    }
    // 解析响应体为JSON格式（这是异步操作，所以要return给下一个then）
    return response.json();
  })
  .then((data) => {
    console.log('完整的JSON数据：', data);
    
    // 提取"completed-works"属性（注意带连字符的属性要用方括号访问）
    const completedWorks = data["completed-works"];
    console.log('已完成作品列表：', completedWorks);

    // 如果要提取更深层级的内容，比如第一个作品的名称（根据实际JSON结构调整）
    if (Array.isArray(completedWorks) && completedWorks.length > 0) {
      const firstWorkTitle = completedWorks[0].title; // 假设每个作品有title字段
      console.log('第一个作品标题：', firstWorkTitle);
    }
  })
  .catch((err) => {
    console.error('请求或解析过程出错：', err);
  });

几个关键要点： #

• 第一个.then()里的response是Fetch返回的响应对象，必须调用.json()才能把响应体转换成可操作的JSON数据，而且这个方法是异步的，所以要return它，让后续的.then()拿到解析后的结果。
• 加入response.ok的检查很重要，能提前捕获4xx/5xx的请求错误，避免在解析错误响应体时抛出额外异常。
• 对于像completed-works这种带连字符的属性名，不能用点语法（data.completed-works会被当成减法运算），必须用方括号语法data["completed-works"]来访问。

如果不确定目标JSON的具体结构，你可以先在控制台打印完整的data，查看层级关系后再针对性提取需要的属性。

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