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

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

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

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

标签：

热门焦点

一加Ace2 Pro真机揭晓钛空灰配色质感拉满

终于，在经过了几波预热之后，一加Ace2 Pro的外观真机图在网上出现了。还是博主数码闲聊站曝光的，这次的外观设计还是延续了一加11的方案，只是细节上有了调整，例如新加入了钛空灰
Mate60手机壳曝光致敬自己的经典设计

8月3日消息，今天下午博主数码闲聊站带来了华为Mate60的第三方手机壳图，可以让我们在真机发布之前看看这款华为全新旗舰的大致轮廓。从曝光的图片看，Mate 60背后摄像头面积依然
7月安卓手机性能榜：红魔8S Pro再夺榜首

7月份的手机市场风平浪静，除了红魔和努比亚带来了两款搭载骁龙8Gen2领先版处理器的新机之外，别的也想不到有什么新品了，这也正常，通常6月7月都是手机厂商修整的时间，进入8月份之
6月iOS设备好评榜：第一蝉联榜首近一年

作为安兔兔各种榜单里变化最小的那个，2023年6月的iOS好评榜和上个月相比没有任何排名上的变化，仅仅是部分设备好评率的下降，长年累月的用户评价和逐渐退出市场的老款机器让这
Java NIO内存映射文件：提高文件读写效率的优秀实践！

Java的NIO库提供了内存映射文件的支持，它可以将文件映射到内存中，从而可以更快地读取和写入文件数据。本文将对Java内存映射文件进行详细的介绍和演示。内存映射文件概述内存
之家push系统迭代之路

前言在这个信息爆炸的互联网时代，能够及时准确获取信息是当今社会要解决的关键问题之一。随着之家用户体量和内容规模的不断增大，传统的靠"主动拉"获取信息的方式已不能满足用
拼多多APP上线本地生活入口，群雄逐鹿万亿市场

Tech星球（微信ID：tech618）文 | 陈桥辉 Tech星球独家获悉，拼多多在其APP内上线了“本地生活”入口，位置较深，位于首页的“充值中心”内，目前主要售卖美食相关的
华为Mate 60系列用上可变灵动岛：正式版体验将会更出色

这段时间以来，关于华为新旗舰的爆料日渐密集。据此前多方爆料，今年华为将开始恢复一年双旗舰战略，除上半年推出的P60系列外，往年下半年的Mate系列也将
华为举行春季智慧办公新品发布会首次推出电子墨水屏平板

北京时间2月27日晚，华为在巴塞罗那举行春季智慧办公新品发布会，在海外市场推出之前已经在中国市场上市的笔记本、平板、激光打印机等办公产品，并首次推出搭载

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

响应进度

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

Xhr（XMLHttpRequest）

Fetch

上传进度

XHR

一加Ace2 Pro真机揭晓钛空灰配色质感拉满

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

7月安卓手机性能榜：红魔8S Pro再夺榜首

6月iOS设备好评榜：第一蝉联榜首近一年

Java NIO内存映射文件：提高文件读写效率的优秀实践！

之家push系统迭代之路

拼多多APP上线本地生活入口，群雄逐鹿万亿市场

华为Mate 60系列用上可变灵动岛：正式版体验将会更出色

华为举行春季智慧办公新品发布会首次推出电子墨水屏平板

最新推荐

猜你喜欢

热门推荐

相关资讯