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

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

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

导读响应进度前段时间做了一个需求，需要将请求响应的进度展示给用户看，就比如下面这样的效果。响应进度从 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 谷歌开发者大会邀你报名「畅享家」

标签：

热门焦点

官方承诺：K60至尊版将会首批升级MIUI 15

全新的MIUI 15今天也有了消息，在官宣了K60至尊版将会搭载天玑9200+处理器和独显芯片X7的同时，Redmi给出了官方承诺，K60至尊重大更新首批升级，会首批推送MIUI 15。也就是说虽然
vivo TWS Air开箱体验：真轻臻好听

在vivo S15系列新机的发布会上，vivo的最新款真无线蓝牙耳机vivo TWS Air也一同发布，本次就这款耳机新品给大家带来一个简单的分享。外包装盒上，vivo TWS Air保持了vivo自家产
中国家电海外掘金正当时｜出海专题

作者｜吴南南编辑｜胡展嘉运营｜陈佳慧出品｜零态LT（ID：LingTai_LT）2023年，出海市场战况空前，中国创业者在海外纷纷摩拳擦掌，以期能够把中国的商业模式、创业理念、战略打法输出海外，他们依
携众多高端产品亮相ChinaJoy，小米带来一场科技与人文的视听盛宴

7月28日，全球数字娱乐领域最具知名度与影响力的年度盛会中国国际数码互动娱乐展览会（简称ChinaJoy）在上海新国际博览中心盛大开幕。作为全球领先的科
华为将推出盘古数字人大模型可帮助用户12小时完成数字人生成

在今日举行的2023年华为云数字文娱AI创新峰会上，华为云全球Marketing与销售服务总裁石冀琳表示，华为云将在后续推出盘古数字人大模型，可帮助用户12小
到手价3099元起！iQOO Neo8 Pro今日首销：安卓性能最强旗舰

5月23日，iQOO如期举行了新品发布会，全新的iQOO Neo8系列也正式与大家见面，包含iQOO Neo8和iQOO Neo8 Pro两个版本，其中标准版搭载高通骁龙8+，而Pro版更
引领旗舰级影像能力向中端机普及 OPPO K11 系列发布 1799 元起

7月25日，OPPO正式发布K系列新品—— OPPO K11 。此次 K11 在中端手机市场长期被忽视的影像板块发力，突破性地搭载索尼 IMX890 旗舰大底主摄，支持 OIS
苹果MacBook Pro 2021测试：仍不支持平滑滚动

据10月30日9to5 Mac 消息报道，苹果新的 14 英寸和 16 英寸 MacBook Pro 2021 上市后获得了不错的评价，亮点包括行业领先的性能，令人印象深刻的电池续航，精美丰
上海举办人工智能大会活动，建设人工智能新高地

人工智能大会在上海浦江两岸隆重拉开帷幕，人工智能新技术、新产品、新应用、新理念集中亮相。8月30日晚，作为大会的特色活动之一的上海人工智能发展盛典人工