如何在 javascript 中使用 fetch() 读取 JSON 文件？

Question

如何在 javascript 中使用 fetch 函数读取本地 JSON 文件？ 我有 JSON 文件，其中包含一些转储数据和一个读取服务器上 JSON 文件的函数。 例如：

readJson () {
   console.log(this)
   let vm = this
   // http://localhost:8080
   fetch('/Reading/api/file').then((response) => response.json()).then(json => {
       vm.users = json
       console.log(vm.users)
   }).catch(function () {
       vm.dataError = true
   })
}

那么，在这个 fetch 函数中读取本地 json 文件必须做什么？

Answer 1

如何在 javascript 中使用 fetch 函数读取本地 JSON 文件？

如果你想阅读http://localhost:8080/Reading/api/file

...那么您所做的是正确的，除非您缺少.ok 检查（这是我写过a blog post 关于它的常见错误）。此外，由于您使用的是箭头函数，除非您喜欢它，否则您不需要执行let vm = this;；箭头函数关闭 this。所以：

readJson () {
   // http://localhost:8080
   fetch('/Reading/api/file')
   .then(response => {
       if (!response.ok) {
           throw new Error("HTTP error " + response.status);
       }
       return response.json();
   })
   .then(json => {
       this.users = json;
       //console.log(this.users);
   })
   .catch(function () {
       this.dataError = true;
   })
}

请务必记住，这是异步； readJson 在 this.users 有值之前返回； 稍后会得到它。如果你想知道它什么时候得到它，return这个promise，这样调用代码就可以使用then了：

readJson () {
   // http://localhost:8080
   return fetch('/Reading/api/file')
   // ...

更多问题的答案：

• How do I return the response from an asynchronous call?
• Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference

如果您尝试从文件系统中读取/Reading/api/file

...那么您至少在某些浏览器中不能，除非您通过 Web 服务器进程提供文件（因为您似乎正在提供页面。然后您通过该服务器进程上的 URL 读取它作为如上所示。

若要读取本地文件，用户必须通过在input type="file" 中选择文件或将其拖入放置区来识别文件。然后你会通过File API而不是fetch阅读它。

Answer 2

还有很简单的Fetch API：

您只需通过以下方式使用它：

// Replace ./data.json with your JSON feed
fetch('./data.json').then(response => {
  return response.json();
}).then(data => {
  // Work with JSON data here
  console.log(data);
}).catch(err => {
  // Do something for an error here
});