为什么 Body.json() 会返回一个 Promise?

WoJ*_*WoJ 5 javascript json promise fetch-api

我从 JS 开始,实际上喜欢异步方面(来自 Python),但我不确定为什么有些函数会返回 Promise。具体来说,下面的代码 usingfetch让我想知道返回的是什么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)
    })
  })
Run Code Online (Sandbox Code Playgroud)

撇开流不谈,我们在 a 之后得到的 HTTP 响应GET是一个文本块,稍后由客户端解释以提取标头、正文和其他有趣的元素 - 作为 HTTP 内容分析的一部分。

关键是这个文本块是一个整体,所以第一个then()已经有了整个响应——为什么解析 JSON 正文是一个异步操作,forEach与第二个不同then()

换句话说,为什么我不能让以下代码工作?

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

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

小智 3

您的第二个代码片段不起作用,因为response.json()又名body.json()不能立即解析。

这是因为body.JSON() streamsand returnsa异步Response使用Promise;然后必须通过回调捕获它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)
  })
})
Run Code Online (Sandbox Code Playgroud)