中興AX5400Pro+上手體驗：再升級 雙2.5G網口+USB 3.0這次全都有
2021年11月的時候，中興先后發布了兩款路由器產品，中興AX5400和中興AX5400 Pro，從產品命名上就不難看出這是隸屬于同一系列的，但在外觀設計上這兩款產品可以說是完全沒一點關系
前段時間做了一個需求，需要將請求響應的進度展示給用戶看，就比如下面這樣的效果。
響應進度從 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-97281-0.html如何獲取請求的進度，并展示給用戶看？
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 性能指標 | CPU飆高排查實戰
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號