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

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

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

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

标签：

热门焦点

把LangChain跑起来的三个方法

使用LangChain开发LLM应用时，需要机器进行GLM部署，好多同学第一步就被劝退了，那么如何绕过这个步骤先学习LLM模型的应用，对Langchain进行快速上手？本片讲解3个把LangChain跑起来
使用LLM插件从命令行访问Llama 2

最近的一个大新闻是Meta AI推出了新的开源授权的大型语言模型Llama 2。这是一项非常重要的进展：Llama 2可免费用于研究和商业用途。(几小时前，swyy发现它已从LLaMA 2更名为Lla
三分钟白话RocketMQ系列—— 如何发送消息

我们知道RocketMQ主要分为消息生产、存储（消息堆积）、消费三大块领域。那接下来，我们白话一下，RocketMQ是如何发送消息的，揭秘消息生产全过程。注意，如果白话中不小心提到相关代
“又被陈思诚骗了”

作者｜张思齐出品｜众面（ID：ZhongMian_ZM）如今的国产悬疑电影，成了陈思诚的天下。最近大爆电影《消失的她》票房突破30亿断层夺魁暑期档，陈思诚再度风头无两。你可以说陈思诚的
大厂卷向扁平化

来源：新熵作者丨南枝编辑丨月见大厂职级不香了。俗话说，兵无常势，水无常形，互联网企业调整职级体系并不稀奇。7月13日，淘宝天猫集团启动了近年来最大的人力制度改革，目前已形成一
三星推出Galaxy Tab S9系列平板电脑以及Galaxy Watch6系列智能手表

2023年7月26日，三星电子正式发布了Galaxy Z Flip5与Galaxy Z Fold5。除此之外，Galaxy Tab S9系列平板电脑以及三星Galaxy Watch6系列智能手表也同期
自研Exynos回归！三星Galaxy S24系列将提供Exynos和骁龙双版本

年初，全新的三星Galaxy S23系列发布，包含Galaxy S23、Galaxy S23+和Galaxy S23 Ultra三个版本，全系搭载超频版骁龙8 Gen 2，虽同样采用台积电4nm工艺制
Android 14发布：首批适配机型公布

5月11日消息，谷歌在今天凌晨举行了I/O大会，本次发布会谷歌带来了自家的AI语言模型PaLM 2、谷歌Pixel Fold折叠屏、谷歌Pixel 7a手机，同时发布了Androi
利用职权私自解除被封帐号 Meta开除20多名员工

11月18日消息，据外媒援引知情人士表示，过去一年时间内，Facebook母公司Meta解雇或处罚了20多名员工以及合同工，指控这些人通过内部系统以不当方式重置用户帐号，其

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

响应进度

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

Xhr（XMLHttpRequest）

Fetch

上传进度

XHR

把LangChain跑起来的三个方法

使用LLM插件从命令行访问Llama 2

三分钟白话RocketMQ系列—— 如何发送消息

“又被陈思诚骗了”

大厂卷向扁平化

三星推出Galaxy Tab S9系列平板电脑以及Galaxy Watch6系列智能手表

自研Exynos回归！三星Galaxy S24系列将提供Exynos和骁龙双版本

Android 14发布：首批适配机型公布

利用职权私自解除被封帐号 Meta开除20多名员工

最新推荐

猜你喜欢

热门推荐

相关资讯