JavaScript fetch API - 为啥 response.json() 返回一个 promise 对象（而不是 JSON）？ [复制]

Posted 2023-02-27

【中文标题】JavaScript fetch API - 为啥 response.json() 返回一个 promise 对象（而不是 JSON）？ [复制]

【英文标题】：JavaScript fetch API - Why does response.json() return a promise object (instead of JSON)? [duplicate]JavaScript fetch API - 为什么 response.json() 返回一个 promise 对象（而不是 JSON）？ [复制]

【发布时间】：2017-01-19 00:53:22

【问题描述】：

我刚刚开始学习 Fetch API：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

这是我写的代码 sn-p 来修补它：

fetch('http://swapi.co/api/people/1')
  .then(function(response) 
    var json = response.json();

    console.log(json);
    // Expected :  "name": "Luke Skywalker","height": "1.72 m", ...  
    // Get : Promise [[PromiseStatus]]: "pending", [[PromiseValue]]: undefined
  ); 

我本来希望从 response.json() 中得到一个 JSON 对象。

类似于使用 JSON.parse() 时得到的结果。

相反，我得到了一个承诺对象。

如果我像这里所示放大承诺链......

return response.json().then(function(json) 
      // process your JSON further
);

...然后它起作用了：在以下承诺的 then 方法中，它显示为 json。

为什么我无法在第一个 Promise 的 then() 中检索 JSON 数据？

谁能解释一下这里发生了什么？

非常感谢。

【问题讨论】：

大多数人没有提到的是，通过在获得标题后立即解析，您可以开始使用该信息进行操作。假设您收到了 400 和一堵巨大的文字墙（不知道为什么会这样），但您可以立即尝试备用呼叫或处理它，而不是浪费时间获取整个响应正文。

我不想因为提出这个答案而被否决...返回给您的对象。 （您将此命名为“响应”）它有一个尚未利用的数据流。可大可小，反正。如果可以选择读取它并返回一个 json 对象。或者您可以检查一些标头标签并完全拒绝该请求。在这里和现在结束请求就像抛出错误或返回一样简单。但是要继续使用该数据流，因为在这里使用 Promise 会带来更多好处。

【参考方案1】：

因为 response.json() 返回另一个承诺（在你的函数体内）

https://developer.mozilla.org/en-US/docs/Web/API/Body/json

【讨论】：

太棒了。谢谢，至少解释了这种行为。然后我必须调用另一个 then for 以获得第二个承诺的结果。我只是问自己，所有这些嵌套有什么好处？

嗯，原因很简单：当你有异步的、可能长时间运行的操作时，你会使用 Promise。在您的情况下，有 2 个这样的操作：1）获取（获取可能需要很长时间的网络资源，并在完成后将其重新转换为响应）和 2）.json()，它获取响应流并在完成后将其解析为 json 对象（也可能很长）。因为两者都使用了 Promise，如果你想使用它们解析为的对象，你需要在两者上使用 .then()。

得到它。因为你的评论。 :) 非常感谢！

这当然是出乎意料的，因为关于此行为的问题数量很多，以及其他库通常如何处理 ajax / rest api 调用。用户跳跃是不必要的障碍。