Javascript 如何在javascript中使用fetch()读取JSON文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51859358/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to read JSON file with fetch() in javascript?
提问by BRRusev
How can I read local JSON file with fetch function in javascript? I have JSON file with some dump data and one function which read JSON file on server. For example :
如何使用 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
})
}
So, What must to do to read local json file in this fetch function?
那么，在这个 fetch 函数中读取本地 json 文件必须做什么？
回答by T.J. Crowder
How can I read local JSON file with fetch function in javascript?
如何使用 javascript 中的 fetch 函数读取本地 JSON 文件？
If you're trying to read http://localhost:8080/Reading/api/file
如果你正在尝试阅读 http://localhost:8080/Reading/api/file
...then what you're doing is correct except you're missing the .okcheck (this is such a common mistake I've written a blog postabout it). Also, since you're using arrow functions, you don't need to do let vm = this;unless you prefer it; arrow functions close overthis. So:
...那么你所做的就是正确的，除了你错过了.ok支票（这是一个很常见的错误，我已经写了一篇关于它的博客文章）。此外，由于您使用的是箭头函数，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;
})
}
It's important to remember that this is asynchronous; readJsonreturns before this.usershas the value; it will get it later. If you want to know when it gets it, returnthe promise so calling code can use thenon it:
重要的是要记住这是异步的；readJson返回之前this.users有值；稍后它会得到它。如果你想知道它什么时候得到它，返回promise 以便调用代码可以then在它上面使用：
readJson () {
// http://localhost:8080
return fetch('/Reading/api/file')
// ...
More in the answers to these questions:
更多关于这些问题的答案：
- 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
If you're trying to read /Reading/api/filefrom the file system
如果您尝试/Reading/api/file从文件系统中读取
...then you can't, in at least some browsers, unless you serve the file via a web server process (as you appear to be serving the page. Then you read it via a URL on that server process as shown above.
...那么你不能，至少在某些浏览器中，除非你通过 web 服务器进程提供文件（因为你似乎正在提供页面。然后你通过该服务器进程上的 URL 读取它，如上所示。
To read a local file otherwise, the user has to identify the file, either by picking it in an input type="file"or dragging it into a dropzone. Then you'd read it via the File API, not fetch.
要以其他方式读取本地文件，用户必须识别该文件，方法是input type="file"将其选中或拖入拖放区。然后你会通过File API读取它，而不是fetch.
回答by Barr J
There is the very simple Fetch API:
有一个非常简单的Fetch API：
you use it simply by:
您只需通过以下方式使用它：
// 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
});
