为什么 Body.json() return 是一个 Promise？

Question

我从 JS 开始，实际上喜欢异步方面（来自 Python），但我不确定为什么某些函数 return 是 Promise。具体来说，以下使用 fetch 的代码让我想知道 return 由 json() 编辑的是什么：

fetch('https://freegeoip.net/json/8.8.8.8')
  .then((response) => {
    return response.json()
  })
  .then((json) => {
    Object.keys(json).forEach((key) => {
      console.log("got " + key)
    })
  })

抛开流式处理，我们在 GET 之后得到的 HTTP 响应是一个文本块，稍后由客户端解释以提取 headers、body 和其他有趣的内容元素 - 作为 HTTP 内容分析的一部分。

关键是这个文本块是一体的，所以第一个 then() 已经有了整个响应 - 为什么 JSON body 的解析是异步的操作，不同于第二个then()?

中的forEach

换句话说，为什么我不能让下面的代码工作？

fetch('https://freegeoip.net/json/8.8.8.8')
  .then((response) => {
    Object.keys(response.json()).forEach((key) => {
      console.log("got " + key)
    })
  })

注意：如果第一个代码运行不正确（带有 ERR_BLOCKED_BY_CLIENT），请尝试禁用您的广告拦截器。第二个是故意不正确的。

Answer 1

你是对的 - 两个片段都做同样的事情。在第一个片段中，以下部分：

.then((response) => {
  return response.json()
})

只是处理第一步的响应并传递结果。这个简单的案例不需要将其分成两步，因此您可以轻松地使用第二个示例。

它在某些情况下很有用。

Answer 2

您的第二个代码段无效，因为 response.json() 又名 body.json() 无法立即解析。

这是因为 body.JSON() streams 和 returns 一个 Response using a Promise asynchronously; which must then be captured by a then() 回调以便读取/操作。

这就是 Promises 的本性。

但是，这样的句法流仍然可以通过利用 async await 来实现。

fetch('https://freegeoip.net/json/8.8.8.8')
.then(async (response) => {
  Object.keys(await response.json()).forEach((key) => {
    console.log("got " + key)
  })
})

为什么 Body.json() return 是一个 Promise？

Why does Body.json() return a Promise?

javascript

json

promise

fetch-api