小米官宣：2023年上半年出貨量中國第一！
今日早間，小米電視官方微博帶來消息，稱2023年小米電視上半年出貨量達(dá)到了中國第一，同時還表示小米電視的巨屏風(fēng)暴即將開始。“公布一個好消息2023年#小米電視上半年出貨量中國
前段時間做了一個需求，需要將請求響應(yīng)的進(jìn)度展示給用戶看，就比如下面這樣的效果。
響應(yīng)進(jìn)度從 0% 到 100% ，去展示給用戶觀看。
圖片
其實(shí)動畫效果倒是不難，可以直接用 ant-design 的 Progress 組件去展示進(jìn)度。
真正的難點(diǎn)在于：如何實(shí)時獲取請求響應(yīng)的進(jìn)度？
其實(shí)這個問題最近幾年很多人都反饋說面試中被問到，并且面試官會問你 Xhr 和 Fetch 這兩種請求方式，他們各自的響應(yīng)進(jìn)度應(yīng)該怎么獲取~
Xhr 的響應(yīng)進(jìn)度其實(shí)是比較好獲取的，因?yàn)?JavaScript 官方提供了一個監(jiān)聽函數(shù) progress來對響應(yīng)進(jìn)度進(jìn)行監(jiān)聽。
圖片
并且這個方法接收一個對象，對象中有兩個屬性很重要：
圖片
所以我們可以根據(jù)這兩個字段來算出百分比，進(jìn)而展示出來！
在此之間我先自己用 express 在本地起了一個本地服務(wù)，用來演示發(fā)起請求。
圖片
接著回到前端頁面，我們使用組件庫，寫出一個頁面！
圖片
當(dāng)我們點(diǎn)擊按鈕發(fā)起請求并收到響應(yīng)后，會監(jiān)聽到每次的百分比。
圖片
有了百分比，我們只需要把百分比放到 Progress 組件中即可實(shí)現(xiàn)展示效果：
圖片
圖片
其實(shí) Fetch 也是同理，只要我們能拿到 total 和 loaded ，也就是 數(shù)據(jù)總長度 和 已加載長度，就能算出百分比。
但是 Fetch 沒有監(jiān)聽函數(shù)，所以得換一種方式去獲取，大概思路就是：
圖片
圖片
最終也能達(dá)到我們想要的結(jié)果。
說完響應(yīng)進(jìn)度，我們再來說說上傳進(jìn)度應(yīng)該怎么去監(jiān)聽呢？
XHR 可以使用XMLHttpRequest.upload自帶的監(jiān)聽函數(shù)progress去做。
圖片
本文鏈接：http://www.www897cc.com/showinfo-26-100995-0.htmlReact 中如何展示 XHR 和 Fetch 的請求響應(yīng)進(jìn)度？
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號