使用 Fetch API 访问 JSON

新手上路,请多包涵

我正在尝试使用 fetch api 取回一些数据,但是一旦我检索到它就无法将其映射到控制台。

 fetch('http://jsonplaceholder.typicode.com/users', {
  method: 'GET'
}).then(function(response) {
  console.log(response)
  response.forEach(i => console.log(i.name));
}).catch(function(err) {
  console.log(`Error: ${err}` )
});

我得到的错误是

response.map 不是函数

所以我尝试解析响应(即 var data=JSON.parse),但它不起作用,出现错误

SyntaxError: Unexpected token o in JSON at position 1"

有趣的是,当对 XMLHttp 请求做同样的事情时,我需要解析它,所以我也很想知道为什么这两种检索数据的方法之间存在差异。

如果有人能指出我正确的方向,我将不胜感激。

原文由 matt-p 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 347
2 个回答

Fetch API 在承诺中返回一个 响应流。响应流不是 JSON,因此尝试对其调用 JSON.parse 将失败。要正确解析 JSON 响应,您需要使用 response.json 函数。这将返回一个承诺,因此您可以继续链。

 fetch('http://jsonplaceholder.typicode.com/users', {
  method: 'GET'
})
.then(function(response) { return response.json(); })
.then(function(json) {
  // use the json
});

原文由 Steven Lambert 发布,翻译遵循 CC BY-SA 3.0 许可协议

了解 promises 是使用 fetch API 的关键。

当您尝试解析您的响应并循环遍历它时,响应实际上只是一个承诺。为了利用来自请求的 实际 响应的内容,您必须进行一些承诺链接。

 fetch('http://jsonplaceholder.typicode.com/users').then(function(response) {
  // response.json() returns a promise, use the same .then syntax to work with the results
  response.json().then(function(users){
    // users is now our actual variable parsed from the json, so we can use it
    users.forEach(function(user){
      console.log(user.name)
    });
  });
}).catch(err => console.error(err));

原文由 shamsup 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏