为什么来自 JavaScript fetch API 的响应对象是一个Promise?

IT技术 javascript ecmascript-6 es6-promise fetch-api
2021-02-27 12:27:53

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

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

在这里,response.json()正在解决它的Promise。

问题是如果你想捕获404错误,你必须解决响应Promise,然后拒绝获取Promise,因为只有在catch出现网络错误时才会结束所以 fetch 调用变得像

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

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

2个回答

如果您的问题是“为什么要response.json()返回Promise?” 然后@Bergi 在评论中提供了线索:“它等待身体加载”。

如果您的问题是“为什么不是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));

反之不能为 polyfill。

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

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

由于 fetch() 是一个相对较低级别的 api,否则您可以使用 axios 等。