Question

我正在尝试使用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请求做同样的事情时，我需要解析它，所以我也有兴趣知道为什么这两种检索数据的方法之间存在差异。

如果有人能指出我正确的方向，我将非常感激。

Answer 1

Fetch API在promise中返回response stream。响应流不是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
});

Answer 2

您可能无法正确访问json。您可以尝试拨打response.json()。

fetch('http://jsonplaceholder.typicode.com/users', {
  method: 'GET'
}).then((response) => {
  response.json().then((jsonResponse) => {
    console.log(jsonResponse)
  })
  // assuming your json object is wrapped in an array
  response.json().then(i => i.forEach(i => console.log(i.name)))
}).catch((err) => {
  console.log(`Error: ${err}` )
});

此示例的结构与您的示例相匹配，但理想情况下，您将在第一个response.json()块上返回.then并继续执行下一个块。 Here是一个类似的例子，继续下一个块。

在您的特定情况下，您可以将Fetch API视为“XMLHttpRequest”的json感知包装器。主要区别在于Fetch API更简单，功能更齐全，并且具有便捷方法。 David Walsh在他的blog post中做了一个合理的比较，我建议你看一下。简单的“XMLHttpRequest”只是传递给你从服务器发回的任何字符串，它不知道它可能是JSON，因此留给用户以他们认为合适的方式解析响应。

Answer 3

了解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.log(`Error: ${err}`));

使用Fetch API访问JSON

3 个答案: