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

文章预览

前言 前端私教训练营：1v1私教，终身辅导计划，帮你拿到满意的  offer 。  已帮助数百位同学拿到了中大厂  offer 响应进度 前段时间做了一个需求，需要将请求响应的进度展示给用户看，就比如下面这样的效果 响应进度从  0%  到  100%  ，去展示给用户观看 其实动画效果倒是不难，可以直接用  ant-design  的  Progress  组件去展示进度 真正的难点在于： 如何实时获取请求响应的进度？ 如何实时获取请求响应的进度？ 其实这个问题最近几年很多人都反馈说面试中被问到，并且面试官会问你  Xhr  和  Fetch  这两种请求方式，他们各自的响应进度应该怎么获取~ Xhr（XMLHttpRequest） Xhr  的响应进度其实是比较好获取的，因为 JavaScript 官方提供了一个监听函数  progress 来对响应进度进行监听 并且这个方法接收一个对象，对象中有两个属性很重要： total： ………………………………