一加Ace2 Pro官宣：普及16G內存 引領24G
一加官方今天繼續為本月發布的新機一加Ace2 Pro帶來預熱，公布了內存方面的信息?！疤蕴?8GB ，12GB 起步，16GB 普及，24GB 引領，還有呢？#一加Ace2Pro#，2023 年 8 月，敬請期待。”同時
前段時間做了一個需求，需要將請求響應的進度展示給用戶看，就比如下面這樣的效果。
響應進度從 0% 到 100% ，去展示給用戶觀看。
圖片
其實動畫效果倒是不難，可以直接用 ant-design 的 Progress 組件去展示進度。
真正的難點在于：如何實時獲取請求響應的進度？
其實這個問題最近幾年很多人都反饋說面試中被問到，并且面試官會問你 Xhr 和 Fetch 這兩種請求方式，他們各自的響應進度應該怎么獲取~
Xhr 的響應進度其實是比較好獲取的，因為 JavaScript 官方提供了一個監聽函數 progress來對響應進度進行監聽。
圖片
并且這個方法接收一個對象，對象中有兩個屬性很重要：
圖片
所以我們可以根據這兩個字段來算出百分比，進而展示出來！
在此之間我先自己用 express 在本地起了一個本地服務，用來演示發起請求。
圖片
接著回到前端頁面，我們使用組件庫，寫出一個頁面！
圖片
當我們點擊按鈕發起請求并收到響應后，會監聽到每次的百分比。
圖片
有了百分比，我們只需要把百分比放到 Progress 組件中即可實現展示效果：
圖片
圖片
其實 Fetch 也是同理，只要我們能拿到 total 和 loaded ，也就是 數據總長度 和 已加載長度，就能算出百分比。
但是 Fetch 沒有監聽函數，所以得換一種方式去獲取，大概思路就是：
圖片
圖片
最終也能達到我們想要的結果。
說完響應進度，我們再來說說上傳進度應該怎么去監聽呢？
XHR 可以使用XMLHttpRequest.upload自帶的監聽函數progress去做。
圖片
本文鏈接：http://m.www897cc.com/showinfo-26-100995-0.htmlReact 中如何展示 XHR 和 Fetch 的請求響應進度？
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： POST請求為何會發送兩次？技術深度解析
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號