如何獲取請求的進度，並展示給使用者看？

2024-06-28碼農

已幫助數百位同學拿到了中大廠 offer

前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心~

響應進度

前段時間做了一個需求，需要將請求響應的進度展示給使用者看，就比如下面這樣的效果

響應進度從 0% 到 100% ，去展示給使用者觀看

其實動畫效果倒是不難，可以直接用 ant-design 的 Progress 元件去展示進度

真正的難點在於： 如何即時獲取請求響應的進度？

其實這個問題最近幾年很多人都反饋說面試中被問到，並且面試官會問你 Xhr 和 Fetch 這兩種請求方式，他們各自的響應進度應該怎麽獲取~

Xhr 的響應進度其實是比較好獲取的，因為 JavaScript 官方提供了一個監聽函式 progress 來對響應進度進行監聽

並且這個方法接收一個物件，物件中有兩個內容很重要：

total： 總響應數據的長度

loaded： 已載入的響應數據的長度

所以我們可以根據這兩個欄位來算出百分比，進而展示出來~

在此之間我先自己用 express 在本地起了一個本地服務，用來演示發起請求

接著回到前端頁面，我們使用元件庫，寫出一個頁面

當我們點選按鈕發起請求並收到響應後，會監聽到每次的百分比

有了百分比，我們只需要把百分比放到 Progress 元件中即可實作展示效果

其實 Fetch 也是同理，只要我們能拿到 total 和 loaded ，也就是 數據總長度 和 已載入長度 ，就能算出百分比

但是 Fetch 沒有監聽函式，所以得換一種方式去獲取，大概思路就是

先從請求頭獲取到 content-length 總長度

再用數據流的 API body.getReader 去讀取響應體當前已載入的長度

最終也能達到我們想要的結果

說完響應進度，我們再來說說上傳進度應該怎麽去監聽呢？

XHR 可以使用 XMLHttpRequest.upload 內建的監聽函式 progress 去做

目前還未有辦法可以監聽，小夥伴們如果有方案的話，可以分享出來~

我是林三心

一個待過 小型toG型外包公司、大型外包公司、小公司、潛力型創業公司、大公司 的作死型前端選手；

一個偏前端的全幹工程師；

一個不正經的金塊作者；

逗比的B站up主；

不帥的小紅書博主；

喜歡打鐵的籃球菜鳥；

喜歡歷史的乏味少年；

喜歡rap的五音不全弱雞如果你想一起學習前端，一起摸魚，一起研究簡歷最佳化，一起研究面試進步，一起交流歷史音樂籃球rap，可以來俺的摸魚學習群哈哈，點這個，有7000多名前端小夥伴在等著一起學習哦 --> 摸魚沸點

我是林三心，感謝您的閱讀~

。

可直接加 Sunday老師微信溝通，回復【資料】可直接領取 Sunday獨家整理 大廠面試題、大廠真實面經 ：