使用fetch API时报Expected a JSON object相关错误如何解决

错误原因分析 #

• data.json文件格式不符合规范
  JSON是纯数据格式文件，不允许包含JavaScript变量声明语法。当前data.json中写了const json = 这行JS代码，不属于标准JSON内容，所以解析器无法识别，直接抛出Expected a JSON object, array, or literal格式错误。
  正确的data.json内容需要删掉变量声明部分，仅保留数据对象本身：

{
    "books": [
        {
            "title": "Learn to Code",
            "author": "John Smith",
            "isbn": "324-23243"
        }, {
            "title": "The Adventures JSON",
            "author": "Jason Jones",
            "isbn": "3324-2-444"
        }, {
            "title": "New Objects",
            "author": "Jane Doe",
            "isbn": "2343-234-2433"
        }
    ]
}

• app.js调用逻辑错误
  JSON是JavaScript的内置全局对象，专门用于处理JSON序列化/反序列化操作，不是你加载的自定义数据变量。你需要先通过fetch请求加载data.json文件，解析拿到数据后再遍历。
  正确的app.js代码如下：

// 发起fetch请求加载本地json文件
fetch('./data.json')
  .then(response => {
    // 校验请求是否成功
    if (!response.ok) {
      throw new Error('网络请求异常')
    }
    // 解析json数据
    return response.json()
  })
  .then(data => {
    // 拿到解析后的数据遍历
    data.books.forEach(function(val){
      console.log(val);
    })
  })
  .catch(error => {
    console.error('加载出错：', error)
  })

验证修复效果 #

修改完两个文件后，打开Chrome控制台刷新页面，即可看到三条书籍数据正常输出，格式报错会消失。

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