響應進度

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

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

圖片

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

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

如何實時獲取請求響應的進度？

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

Xhr（XMLHttpRequest）

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

圖片

并且這個方法接收一個對象，對象中有兩個屬性很重要：

• total： 總響應數據的長度。
• loaded： 已加載的響應數據的長度。

圖片

所以我們可以根據這兩個字段來算出百分比，進而展示出來！

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

圖片

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

圖片

當我們點擊按鈕發起請求并收到響應后，會監聽到每次的百分比。

圖片

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

圖片

圖片

Fetch

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

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

• 先從請求頭獲取到 content-length 總長度。
• 再用數據流的 API body.getReader 去讀取響應體當前已加載的長度。

圖片

圖片

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

圖片

上傳進度

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

XHR

XHR 可以使用XMLHttpRequest.upload自帶的監聽函數progress去做。

圖片

圖片

Fetch

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