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

React 中如何展示 XHR 和 Fetch 的请求响应进度？

来源：责编：时间：2024-07-15 17:18:53 277观看

导读响应进度前段时间做了一个需求，需要将请求响应的进度展示给用户看，就比如下面这样的效果。响应进度从 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去做。

图片

本文链接：http://www.28at.com/showinfo-26-100995-0.htmlReact 中如何展示 XHR 和 Fetch 的请求响应进度？

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

上一篇： POST请求为何会发送两次？技术深度解析

下一篇：智启万象｜2024 Google 谷歌开发者大会邀你报名「畅享家」

标签：

热门焦点

Mate60手机壳曝光致敬自己的经典设计

8月3日消息，今天下午博主数码闲聊站带来了华为Mate60的第三方手机壳图，可以让我们在真机发布之前看看这款华为全新旗舰的大致轮廓。从曝光的图片看，Mate 60背后摄像头面积依然
直屏旗舰来了 iQOO 12和K70 Pro同台竞技

旗舰机基本上使用的都是双曲面屏幕，这就让很多喜欢直屏的爱好者在苦等一款直屏旗舰，这次，你们等到了。据博主数码闲聊站带来的最新爆料称，Redmi下代旗舰K70 Pro和iQOO 12两款手
6月安卓手机性能榜：vivo/iQOO霸占旗舰排行榜前三

2023年上半年已经正式过去了，我们也迎来了安兔兔V10版本，在新的骁龙8Gen3和天玑9300发布之前，性能榜的榜单大体会以骁龙8Gen2和天玑9200+为主，至于那颗3.36GHz的骁龙8Gen2领先
十个简单但很有用的Python装饰器

装饰器（Decorators）是Python中一种强大而灵活的功能，用于修改或增强函数或类的行为。装饰器本质上是一个函数，它接受另一个函数或类作为参数，并返回一个新的函数或类。它们通常用
慕岩炮轰抖音，百合网今何在？

来源：价值研究所作者：Hernanderz“难道就因为自己的一个产品牛逼了，从客服到总裁，都不愿意正视自己产品和运营上的问题，选择逃避了吗？”这一番话，出自百合网联合创
自律，给不了Keep自由！

来源 | 互联网品牌官作者 | 李大为编排 | 又耳审核 | 谷晓辉自律能不能给用户自由暂时不好说，但大概率不能给Keep自由。近日，全球最大的在线健身平台Keep正式登陆港交所，努力
iQOO Neo8 Pro抢先上架：首发天玑9200+ 安卓性能之王

经过了一段时间的密集爆料，昨日iQOO官方如期对外宣布：将于5月23日推出全新的iQOO Neo8系列新品，官方称这是一款拥有旗舰级性能调校的作品。随着发布时
OPPO K11搭载长寿版100W超级闪充：26分钟充满100%

据此前官方宣布，OPPO将于7月25日也就是今天下午14:30举办新品发布会，届时全新的OPPO K11将正式与大家见面，将主打旗舰影像，和同档位竞品相比，其最大的卖
2021中国国际消费电子博览会与青岛国际软件融合创新博览会新闻发布会隆重举行

9月18日，2021中国国际消费电子博览会与青岛国际软件融合创新博览会新闻发布会在青岛国际新闻中心隆重举行。发布会上青岛市政府领导联袂出席，对本次双展会情

React 中如何展示 XHR 和 Fetch 的请求响应进度？

响应进度

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

Xhr（XMLHttpRequest）

Fetch

上传进度

XHR

Mate60手机壳曝光致敬自己的经典设计

直屏旗舰来了 iQOO 12和K70 Pro同台竞技

6月安卓手机性能榜：vivo/iQOO霸占旗舰排行榜前三

十个简单但很有用的Python装饰器

慕岩炮轰抖音，百合网今何在？

自律，给不了Keep自由！

iQOO Neo8 Pro抢先上架：首发天玑9200+ 安卓性能之王

OPPO K11搭载长寿版100W超级闪充：26分钟充满100%

2021中国国际消费电子博览会与青岛国际软件融合创新博览会新闻发布会隆重举行

最新推荐

猜你喜欢

热门推荐

相关资讯