为什么我无法在开发者控制台中查看 fetch 的 Response 对象中的 json？

Question

我最近了解了 JavaScript 的 Fetch API，我想知道为什么我不能直接从响应对象 return 中看到 json 数据.

例如，我有一个 url return 一些 json。

fetch("https://myURL/json",
    {
        method: "GET",
        credentials: "include"
    }
)
.then(function(response) {
  if(response.ok) {
    return response.json();
  }
  throw new Error('Network response was not ok.');
}).then(function(myJson) { 
  console.log(myJson); 
})

如果我在第一个 .then 中放置一个断点，我可以在 Chrome/Firefox 的开发者控制台中查看从提取中获取的响应对象 return。该对象将有一些数据，但无法直接查看 json。我必须调用该对象的 .json() 方法和 return 才能真正看到 json 数据。

为什么我在调用 .json() 之前看不到 Response 对象中的 json 数据？当我们到达第一个 .then() 时，Fetch 不是已经完成了吗？

Answer 1

根据this google developers article

The response of a fetch() request is a Stream object, which means that when we call the json() method, a Promise is returned since the reading of the stream will happen asynchronously.

MDN has some info on this as well

Answer 2

我不知道您在复制粘贴代码时是否犯了错误，但是您遗漏了 URL 字符串上的结束引号。

除此之外，我尝试了那段代码，它做了它应该做的事情：

fetch("https://jsonplaceholder.typicode.com/users", {
    method: "GET",
    credentials: "include"
})
.then(function(response) {
    if (response.ok) {
        return response.json();
    }
    throw new Error('Network response was not ok.');
}).then(function(myJson) {
    console.log(myJson);
});

https://jsfiddle.net/9s9t2968/

为什么我无法在开发者控制台中查看 fetch 的 Response 对象中的 json？

Why can't I view json inside fetch's Response object in the developer console?

javascript

fetch-api