PronHub Web前端技术分享

跟 PronHub 学 Web 前端！画中画技术实现

在 Pronhub 前端技术分享中提到：

Fetch：没有下载进度，也没有提供拦截请求的方法

关于 fetch 没有下载进度这点，是有失偏颇的。先从我们熟悉的 ajax 说起。

ajax 获取下载进度

XHR 对象中的 onprogress 会在请求完成前周期性调用。它可以获取当前下载的状态。所以可以实现下载进度的观察。

fetch 获取下载进度

对于 fetch，因为它本身被设计的很轻巧，所以我们使用时候也很简便，通常是：

那么，该如何获取其下载进度呢。

fetch 获取数据还有另外一种写法：

上面代码中使用了两次 await ，可以理解为：请求头和请求体的获取是分离的。首次 await 获得的是请求头的响应，第二次的 await 是获得请求体的响应。

而请求体的内容是分块到达浏览器的，当所有请求块到达后，res.json() 完成允诺（resolve），获得请求体的所有数据。

我们希望跟踪的下载进度，可以从首次请求头的内容中获取。

请求头（res）中的 body 属性，它是一个可读流对象（ReadableStream），能逐个提供请求块。通过计算每块的长度就能跟踪下载进度。

结语

相信在了解 fetch 的这些特性后，面试会被问到「如何使用 fetch 实现下载进度条」时，也不会一脸懵逼，可收藏备战面试。

兼听则明，虽然P站技术是在 Web 技术的前沿，但它透露出来的技术信息未必完全正确。当然，也有可能是采访时口误的原因。实际上，fetch 不能实现的是上传进度这部分。

你的点赞转发收藏就是对创作的最大支持。