登陆

章鱼彩票app-跟 PronHub 学 Web前端!fetch 获取下载进展

admin 2020-02-14 199人围观 ,发现0个评论

PronHub Web前端技术分享

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

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

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

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

ajax 获取下载进度

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

fetch 获取下载进美女动态邪恶度

对于 fetch,因为它本身被章鱼彩票app-跟 PronHub 学 Web前端!fetch 获取下载进展设计的很轻巧,所以我们使章鱼彩票app-跟 PronHub 学 Web前端!fetch 获取下载进展用时候也很简便,通常是:

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

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

上面代码中使用了两次 await ,可以理解为:请求头和请求体的获取章鱼彩票app-跟 PronHub 学 Web前端!fetch 获取下载进展是分离的。首次 await 获得的是请求头的响应,第二次的 await 是获得请求体的响应。

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

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

请求头(res)中的 body 属性,它是一个可读流对象(ReadableStream),能逐个提供请求块。通过章鱼彩票app-跟 PronHub 学 Web前端!fetch 获取下载进展计算每块的长度就能跟踪下载进度。

结语

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

兼听则明,虽然P站技术是在 Web 技术的前沿,但它透露出章鱼彩票app-跟 PronHub 学 Web前端!fetch 获取下载进展来的技术信息未必完全正确。当然,也有可能是采访时口误的原因。实际上,fetch 不能实现的是上传进度这部分。

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

请关注微信公众号
微信二维码
不容错过
Powered By Z-BlogPHP