響應進度

前段時間做了一個需求，需要將請求響應的進度展示給用戶看，就比如下面這樣的效果。pHe28資訊網——每日最新資訊28at.com

響應進度從 0% 到 100% ，去展示給用戶觀看。pHe28資訊網——每日最新資訊28at.com

圖片pHe28資訊網——每日最新資訊28at.com

pHe28資訊網——每日最新資訊28at.com

其實動畫效果倒是不難，可以直接用 ant-design 的 Progress 組件去展示進度。pHe28資訊網——每日最新資訊28at.com

真正的難點在于：如何實時獲取請求響應的進度？pHe28資訊網——每日最新資訊28at.com

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

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

Xhr（XMLHttpRequest）

Xhr 的響應進度其實是比較好獲取的，因為 JavaScript 官方提供了一個監聽函數 progress來對響應進度進行監聽。pHe28資訊網——每日最新資訊28at.com

圖片pHe28資訊網——每日最新資訊28at.com

并且這個方法接收一個對象，對象中有兩個屬性很重要：pHe28資訊網——每日最新資訊28at.com

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

圖片pHe28資訊網——每日最新資訊28at.com

所以我們可以根據這兩個字段來算出百分比，進而展示出來！pHe28資訊網——每日最新資訊28at.com

在此之間我先自己用 express 在本地起了一個本地服務，用來演示發起請求。pHe28資訊網——每日最新資訊28at.com

圖片pHe28資訊網——每日最新資訊28at.com

接著回到前端頁面，我們使用組件庫，寫出一個頁面。pHe28資訊網——每日最新資訊28at.com

圖片pHe28資訊網——每日最新資訊28at.com

當我們點擊按鈕發起請求并收到響應后，會監聽到每次的百分比。pHe28資訊網——每日最新資訊28at.com

圖片pHe28資訊網——每日最新資訊28at.com

pHe28資訊網——每日最新資訊28at.com

有了百分比，我們只需要把百分比放到 Progress 組件中即可實現展示效果。pHe28資訊網——每日最新資訊28at.com

圖片pHe28資訊網——每日最新資訊28at.com

圖片pHe28資訊網——每日最新資訊28at.com

pHe28資訊網——每日最新資訊28at.com

Fetch

其實 Fetch 也是同理，只要我們能拿到 total 和 loaded ，也就是 數據總長度 和 已加載長度，就能算出百分比。pHe28資訊網——每日最新資訊28at.com

但是 Fetch 沒有監聽函數，所以得換一種方式去獲取，大概思路就是：pHe28資訊網——每日最新資訊28at.com

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

圖片pHe28資訊網——每日最新資訊28at.com

圖片pHe28資訊網——每日最新資訊28at.com

最終也能達到我們想要的結果：pHe28資訊網——每日最新資訊28at.com

圖片pHe28資訊網——每日最新資訊28at.com

pHe28資訊網——每日最新資訊28at.com

上傳進度

說完響應進度，我們再來說說上傳進度應該怎么去監聽呢？pHe28資訊網——每日最新資訊28at.com

XHR

XHR 可以使用XMLHttpRequest.upload自帶的監聽函數progress去做。pHe28資訊網——每日最新資訊28at.com

圖片pHe28資訊網——每日最新資訊28at.com

圖片pHe28資訊網——每日最新資訊28at.com

Fetch

目前還未有辦法可以監聽，小伙伴們如果有方案的話，可以分享出來！pHe28資訊網——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-97281-0.html如何獲取請求的進度，并展示給用戶看？

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 性能指標 | CPU飆高排查實戰

下一篇： ECMAScript 2024 正式發布，新特性一覽！