为什么 JavaScript fetch API 的响应对象是一个承诺？答案

【问题标题】：Why is the response object from JavaScript fetch API a promise?为什么 JavaScript fetch API 的响应对象是一个承诺？
【发布时间】：2023-04-07 05:52:02
【问题描述】：

当使用 JavaScript fetch API 从服务器请求时，您必须执行类似的操作

fetch(API)
  .then(response => response.json())
  .catch(err => console.log(err))

在这里，response.json() 正在履行其承诺。

问题是，如果你想捕捉404 的错误，你必须解决响应承诺然后拒绝获取承诺，因为如果出现网络错误，你只会以catch 结束。所以 fetch 调用变成了类似

fetch(API)
  .then(response => response.ok ? response.json() : response.json().then(err => Promise.reject(err)))
  .catch(err => console.log(err))

这是更难阅读和推理的东西。所以我的问题是：为什么需要这个？将承诺作为响应值有什么意义？有没有更好的方法来处理这个问题？

【问题讨论】：

响应对象不是承诺。这是一个响应，带有 json （以及其他返回承诺的方法。你的问题是为什么 json() 返回承诺？
不完全是重复的，但你可能想看看here
您真的需要 404 响应的内容作为您的错误吗？如果没有，有更简单的方法来实现你想要的。如果你这样做，我认为fetch 的工作方式没有任何问题。
是的，我需要那个。 fetch 没有什么问题，只是我想知道它是如何工作的。
@caasjj: response.json() 也确实返回了一个承诺（因为它等待正文加载）

标签： javascript ecmascript-6 es6-promise fetch-api

【解决方案1】：

如果您的问题是“为什么response.json() 会返回一个承诺？”然后@Bergi 在 cmets 中提供了线索：“它等待身体加载”。

如果您的问题是“为什么response.json 不是一个属性？”，那么这将需要fetch 延迟返回其响应，直到正文已加载，这对某些人来说可能是可以的，但不是所有人。

这个 polyfill 应该可以得到你想要的：

var fetchOk = api => fetch(api)
  .then(res => res.ok ? res : res.json().then(err => Promise.reject(err)));

那么你可以这样做：

fetchOk(API)
  .then(response => response.json())
  .catch(err => console.log(err));

反面不能填充。

【讨论】：

【解决方案2】：

因为有时我们需要精确控制加载过程（从接收第一条数据到接收最后一条数据）。

在现实世界中，json 可能不是一个很好的例子，因为它相对较小。但是成像一个大图片逐渐加载的情况（从马赛克到清晰）。在这种情况下，当数据接收完成时通知程序为时已晚。

由于 fetch() 是一个比较低级的 api，否则你可以使用 axios 之类的。

【讨论】：