当前位置：首页 > 科技 > 软件

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

来源：责编：时间：2024-06-28 17:11:57 69观看

导读响应进度前段时间做了一个需求，需要将请求响应的进度展示给用户看，就比如下面这样的效果。响应进度从 0% 到 100% ，去展示给用户观看。图片
其实动画效果倒是不难，可以直接用 ant-design 的 Progress 组件去展示进度。真

响应进度

前段时间做了一个需求，需要将请求响应的进度展示给用户看，就比如下面这样的效果。

响应进度从 0% 到 100% ，去展示给用户观看。

图片

其实动画效果倒是不难，可以直接用 ant-design 的 Progress 组件去展示进度。

真正的难点在于：如何实时获取请求响应的进度？

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

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

Xhr（XMLHttpRequest）

Xhr 的响应进度其实是比较好获取的，因为 JavaScript 官方提供了一个监听函数 progress来对响应进度进行监听。

图片

并且这个方法接收一个对象，对象中有两个属性很重要：

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

图片

所以我们可以根据这两个字段来算出百分比，进而展示出来！

在此之间我先自己用 express 在本地起了一个本地服务，用来演示发起请求。

图片

接着回到前端页面，我们使用组件库，写出一个页面。

图片

当我们点击按钮发起请求并收到响应后，会监听到每次的百分比。

图片

有了百分比，我们只需要把百分比放到 Progress 组件中即可实现展示效果。

图片

Fetch

其实 Fetch 也是同理，只要我们能拿到 total 和 loaded ，也就是数据总长度和已加载长度，就能算出百分比。

但是 Fetch 没有监听函数，所以得换一种方式去获取，大概思路就是：

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

图片

最终也能达到我们想要的结果：

图片

上传进度

说完响应进度，我们再来说说上传进度应该怎么去监听呢？

XHR

XHR 可以使用XMLHttpRequest.upload自带的监听函数progress去做。

图片

Fetch

目前还未有办法可以监听，小伙伴们如果有方案的话，可以分享出来！

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

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

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

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

标签：

热门焦点

影音体验是真的强简单聊聊iQOO Pad

大公司的好处就是产品线丰富，非常细分化的东西也能给你做出来，例如早先我们看到了新的vivo Pad2，之后我们又在iQOO Neo8 Pro的发布会上看到了iQOO的首款平板产品iQOO Pad。虽
学习JavaScript的10个理由...

作者 | Simplilearn编译 | 王瑞平当你决心学习一门语言的时候，很难选择到底应该学习哪一门，常用的语言有Python、Java、JavaScript、C/CPP、PHP、Swift、C#、Ruby、Objective-
之家push系统迭代之路

前言在这个信息爆炸的互联网时代，能够及时准确获取信息是当今社会要解决的关键问题之一。随着之家用户体量和内容规模的不断增大，传统的靠"主动拉"获取信息的方式已不能满足用
每天一道面试题-CPU伪共享

前言：了不起：又到了每天一到面试题的时候了！学弟，最近学习的怎么样啊了不起学弟：最近学习的还不错，每天都在学习，每天都在进步！了不起：那你最近学习的什么呢？了不起学弟：最近在学习C
使用AIGC工具提升安全工作效率

在日常工作中，安全人员可能会涉及各种各样的安全任务，包括但不限于：开发某些安全工具的插件，满足自己特定的安全需求；自定义github搜索工具，快速查找所需的安全资料、漏洞poc、exp
年轻人的“职场羞耻感”，无处不在

作者：冯晓亭陶淘李欣张琳马舒叶来源：燃次元“人在职场，应该选择什么样的着装？”近日，在网络上，一个与着装相关的帖子引发关注，在该帖子里，一位在高级写字楼亚洲金
三星获批量产iPhone 15全系屏幕：苹果史上最惊艳直屏

按照惯例，苹果将继续在今年9月举办一年一度的秋季新品发布会，有传言称发布会将于9月12日举行，届时全新的iPhone 15系列将正式与大家见面，不出意外的话
联想的ThinkBook Plus下一版曝光，键盘旁边塞个平板

ThinkBook Plus 是联想的一个特殊笔记本类别，它在封面放入了一块墨水屏，也给人留下了较为深刻的印象。据有人爆料，联想的下一款 ThinkBook Plus 可能更特殊，它
onebot M24巧系列一体机采用轻薄机身设计，现已在各平台开售

onebot M24 巧系列一体机目前已在线上线下各平台同步开售。onebot M24 巧系列采用一体化轻薄机身设计，最薄处为 10.15mm，拥有宝石红、午夜蓝、石墨绿、雅致