我试图使用FetchAPI带回一些数据,但是一旦检索到数据,我就无法将其Map到控制台。
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请求执行相同的操作时,我需要解析它,因此我还想知道这两种检索数据方法之间的差异。
如果有人能给我指出正确的方向,我将非常感激。
3条答案
按热度按时间y1aodyip1#
fetchapi在promise中返回一个响应流。响应流不是json,因此尝试调用
JSON.parse
它将失败。要正确解析json响应,需要使用response.json函数。这将返回一个承诺,以便您可以继续链。taor4pac2#
理解承诺是使用fetchapi的关键。
当您试图解析响应并循环它时,响应实际上只是一个承诺。为了利用来自请求的实际响应的内容,您必须进行一些承诺链接。
fcy6dtqo3#
您可能访问json的方式不正确。你可以试着打电话
response.json()
相反此示例的结构与您的示例相匹配,但理想情况下,您会返回
response.json()
首先.then
阻塞并继续下一个阻塞。下面是一个类似的示例,将在下一个块中继续。在您的特定情况下,可以将fetchapi视为“xmlhttprequest”的json感知 Package 器。主要区别在于fetchapi更简单、功能类似,并且具有方便的方法。大卫·沃尔什在他的博客文章中做了一个合理的比较,我建议你看看。简单的“xmlhttprequest”只需将从服务器返回的字符串传递给您,它不知道它可能是json,因此将其留给用户以他们认为合适的方式解析响应。