JSON.parse()与.json()有何不同？

Question

最近我一直在使用fetch API和Promises，并遇到了.json()。很多时候.json()返回与JSON.parse相同的输出结果。我通过谷歌搜索了这个问题，但结果指向其他方向。

以下是XHR和JSON.parse的示例：

$('#xhr').click(function(){
  var XHR = new XMLHttpRequest();

  XHR.onreadystatechange = function(){
    if (XHR.status == 200 && XHR.readyState == 4) {
      $('#quote').text(JSON.parse(XHR.responseText)[0]);
    }
  };

  XHR.open("GET", url);
  XHR.send();
});

使用 Fetch API 的示例：

$('#fetch').click(function(){
  fetch(url)
  .then(function(res){
    return res.json();
  })
  .then(function(quote){
    $('#quote').text(quote);
  })
  .catch(function(err){
    handleError(err);
  });
});

有人能解释一下这些看似相似的概念的区别吗？谢谢。

- Isfaaq

---

你能展示一下你的代码吗？ - tsh

@fool-dev 你读过这个问题吗？ - tsh

我添加了示例 - Isfaaq

也许是 Fetch API 和 XMLHttpRequest 有什么区别？ 的重复问题？ - tsh

@tsh 这个链接的问题如何解决当前问题的疑问？ - guest271314

Answer 1

Body.json() 是异步的，返回一个 Promise 对象，并解析成 JavaScript 对象。而JSON.parse() 是同步的，可以解析字符串并返回相应的 JavaScript 对象。

- guest271314

---

谢谢您的回复。 :) - Isfaaq

Body.json() 返回一个 Promise - 但我看到一些例子中使用 data = Body.json()，所以数据可以直接访问 - 显然不需要解开 Promise - 但在其他例子中，我看到 Promise 通过 .then(data) 使用，然后从 Promise 中访问数据。为什么第一个例子能够工作？谢谢。 - john blair

Answer 2

'AJAX' 使用'回调函数'进行操作; 'fetch' 使用 'promises' 进行操作。

使用JSON.parse()解析 AJAX 响应; 使用json()解析 fetch 响应。

- Andreycw

Answer 3

在我看来，res.json和JSON.parse的功能是相同的。之所以优先使用res.json，是因为它的语法更加简洁。 以下是一个示例，以便更好地理解：

 this.service.userFunction() //calling service
.then((res) => {
 this.userdetails = JSON.parse(res._body); //use this
 this.userdetails = res.json(); // or use this syntax any one
 )}
.catch()

使用其中任意一个都会提供完整的响应体，并了解它们的功能。

- Yogesh Aggarwal

---

res.json() 返回一个 Promise，所以在返回该 Promise 后，您需要链接另一个 then(data){ this.userdetails = data }。 - kennsorr

Answer 4

Body mixin的json()方法接受一个Response流并读取它直到完成。它返回一个Promise，该Promise解析文本体作为JSON的结果。

JSON.parse()方法解析JSON字符串，构造由字符串描述的JavaScript值或对象。

用JSON.parse()解析AJAX的响应。使用json()解析fetch的响应。

- adi1ya