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

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

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

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

标签：

热门焦点

服务存储设计模式：Cache-Aside模式

Cache-Aside模式一种常用的缓存方式，通常是把数据从主存储加载到KV缓存中，加速后续的访问。在存在重复度的场景，Cache-Aside可以提升服务性能，降低底层存储的压力，缺点是缓存和底
多线程开发带来的问题与解决方法

使用多线程主要会带来以下几个问题：（一）线程安全问题　　线程安全问题指的是在某一线程从开始访问到结束访问某一数据期间，该数据被其他的线程所修改，那么对于当前线程而言，该线程
自动化在DevOps中的力量：简化软件开发和交付

自动化在DevOps中扮演着重要角色，它提升了DevOps的效能。通过自动化工具和方法，DevOps团队可以实现以下目标：消除手动和重复性任务。简化流程。在整个软件开发生命周期中实现更
一文掌握 Golang 模糊测试（Fuzz Testing）

模糊测试（Fuzz Testing）模糊测试（Fuzz Testing）是通过向目标系统提供非预期的输入并监视异常结果来发现软件漏洞的方法。可以用来发现应用程序、操作系统和网络协议等中的漏洞或
10天营收超1亿美元，《星铁》比《原神》差在哪？

来源：伯虎财经作者：陈平安即便你没玩过《原神》，你一定听说过的它的大名。恨它的人把《原神》开服那天称作是中国游戏史上最黑暗的一天，有粉丝因为索尼在PS平台上线《原神》，怒而
东方甄选单飞：有些鸟注定是关不住的

文/彭宽鸿编辑/罗卿东方甄选创始人俞敏洪带队的“7天甘肃行”直播活动已在近日顺利收官。成立后一年多时间里，东方甄选要脱离抖音自立门户的传闻不绝于耳，“7
微博大门常打开，迎接海外画师漂洋东渡

作者:互联网那些事“起猛了，我能看得懂日语了”。“为什么日本人说话我能听懂？”“中文不像中文，日语不像日语，但是我竟然看懂了”…&hell
超级标准版旗舰！iQOO 11S全球首发iQOO超算独显芯片

上半年已接近尾声，截至目前各大品牌旗下的顶级旗舰都已悉数亮相，而下半年即将推出的顶级旗舰已经成为了数码圈爆料的主流，其中就包括全新的iQOO 11S系
英特尔Xe HPG游戏显卡：拥有512EU，单风扇版本

据10 月 30 日外媒 TheVerge 消息报道，英特尔 Xe HPG Arc Alchemist 的正面实被曝光，不仅拥有 512 EU 版显卡，还拥有 128EU 的单风扇版本。另外，这款显卡 PCB

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

响应进度

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

Xhr（XMLHttpRequest）

Fetch

上传进度

XHR

服务存储设计模式：Cache-Aside模式

多线程开发带来的问题与解决方法

自动化在DevOps中的力量：简化软件开发和交付

一文掌握 Golang 模糊测试（Fuzz Testing）

10天营收超1亿美元，《星铁》比《原神》差在哪？

东方甄选单飞：有些鸟注定是关不住的

微博大门常打开，迎接海外画师漂洋东渡

超级标准版旗舰！iQOO 11S全球首发iQOO超算独显芯片

英特尔Xe HPG游戏显卡：拥有512EU，单风扇版本

最新推荐

猜你喜欢

热门推荐

相关资讯