如何获取请求的进度，并展示给用户看？

响应进度

前段时间做了一个需求，需要将请求响应的进度展示给用户看，就比如下面这样的效果。EI328资讯网——每日最新资讯28at.com

响应进度从 0% 到 100% ，去展示给用户观看。EI328资讯网——每日最新资讯28at.com

图片EI328资讯网——每日最新资讯28at.com

EI328资讯网——每日最新资讯28at.com

其实动画效果倒是不难，可以直接用 ant-design 的 Progress 组件去展示进度。EI328资讯网——每日最新资讯28at.com

真正的难点在于：如何实时获取请求响应的进度？EI328资讯网——每日最新资讯28at.com

如何实时获取请求响应的进度？

其实这个问题最近几年很多人都反馈说面试中被问到，并且面试官会问你 Xhr 和 Fetch 这两种请求方式，他们各自的响应进度应该怎么获取。EI328资讯网——每日最新资讯28at.com

Xhr（XMLHttpRequest）

Xhr 的响应进度其实是比较好获取的，因为 JavaScript 官方提供了一个监听函数 progress来对响应进度进行监听。EI328资讯网——每日最新资讯28at.com

图片EI328资讯网——每日最新资讯28at.com

并且这个方法接收一个对象，对象中有两个属性很重要：EI328资讯网——每日最新资讯28at.com

• total： 总响应数据的长度。
• loaded： 已加载的响应数据的长度。

图片EI328资讯网——每日最新资讯28at.com

所以我们可以根据这两个字段来算出百分比，进而展示出来！EI328资讯网——每日最新资讯28at.com

在此之间我先自己用 express 在本地起了一个本地服务，用来演示发起请求。EI328资讯网——每日最新资讯28at.com

图片EI328资讯网——每日最新资讯28at.com

接着回到前端页面，我们使用组件库，写出一个页面。EI328资讯网——每日最新资讯28at.com

图片EI328资讯网——每日最新资讯28at.com

当我们点击按钮发起请求并收到响应后，会监听到每次的百分比。EI328资讯网——每日最新资讯28at.com

图片EI328资讯网——每日最新资讯28at.com

EI328资讯网——每日最新资讯28at.com

有了百分比，我们只需要把百分比放到 Progress 组件中即可实现展示效果。EI328资讯网——每日最新资讯28at.com

图片EI328资讯网——每日最新资讯28at.com

图片EI328资讯网——每日最新资讯28at.com

EI328资讯网——每日最新资讯28at.com

Fetch

其实 Fetch 也是同理，只要我们能拿到 total 和 loaded ，也就是 数据总长度 和 已加载长度，就能算出百分比。EI328资讯网——每日最新资讯28at.com

但是 Fetch 没有监听函数，所以得换一种方式去获取，大概思路就是：EI328资讯网——每日最新资讯28at.com

• 先从请求头获取到 content-length 总长度。
• 再用数据流的 API body.getReader 去读取响应体当前已加载的长度。

图片EI328资讯网——每日最新资讯28at.com

图片EI328资讯网——每日最新资讯28at.com

最终也能达到我们想要的结果：EI328资讯网——每日最新资讯28at.com

图片EI328资讯网——每日最新资讯28at.com

EI328资讯网——每日最新资讯28at.com

上传进度

说完响应进度，我们再来说说上传进度应该怎么去监听呢？EI328资讯网——每日最新资讯28at.com

XHR

XHR 可以使用XMLHttpRequest.upload自带的监听函数progress去做。EI328资讯网——每日最新资讯28at.com

图片EI328资讯网——每日最新资讯28at.com

图片EI328资讯网——每日最新资讯28at.com

Fetch

目前还未有办法可以监听，小伙伴们如果有方案的话，可以分享出来！EI328资讯网——每日最新资讯28at.com

本文链接：http://www.28at.com/showinfo-26-97281-0.html如何获取请求的进度，并展示给用户看？

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： 性能指标 | CPU飙高排查实战

下一篇： ECMAScript 2024 正式发布，新特性一览！