Hacktoberfest 2026：維護者為十月標記出來的 issue，仍然開放、適合新手。 瀏覽 Hacktoberfest issue

网络请求-3-fetch 下载进度 勘误

未關閉
#1,246 0 則留言 0 個 reaction 已指派 0 人 在 GitHub 檢視

還沒有人認領這個 Issue。

評估

難度
2/5
預估耗時
1-3 小時
新手友好度
45/100
Issue 類型
文件
描述清晰度
基本清楚
活躍度
停滯
技術堆疊
javascript
領域
documentation

研究方向

從 https://zh.javascript.info/fetch-progress 上的 fetch 進度文章開始，檢查使用 response.body.getReader()、Content-Length 和 receivedLength 的範例。修正說明或範例，使其考量經過壓縮的回應，並確認文件中的進度計算與 fetch 傳回的位元組串流一致。

由索引模型根據 Issue 內容生成。

描述

原文链接：https://zh.javascript.info/fetch-progress

在Content-Encoding指定了某种压缩方式时，fetch提供的getReader中读取到的是解压缩后的二进制流，而Content-Length所指示的是解压缩前的请求体大小。

在绝大多数场景，浏览器自动指示Accept-Encoding的情况下，不能直接使用Content-Length作为完整报文长度进行进度计算，而应当使用其它方式/响应头告知客户端完整的报文长度。

原文中示例代码如下：

// Step 1：启动 fetch，并获得一个 reader
let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits?per_page=100');

const reader = response.body.getReader();

// Step 2：获得总长度（length）
const contentLength = +response.headers.get('Content-Length');

// Step 3：读取数据
let receivedLength = 0; // 当前接收到了这么多字节
let chunks = []; // 接收到的二进制块的数组（包括 body）
while(true) {
  const {done, value} = await reader.read();

  if (done) {
    break;
  }

  chunks.push(value);
  receivedLength += value.length;

  console.log(`Received ${receivedLength} of ${contentLength}`)
}

// 以下略
主要語言
HTML
星號
10.8k
分支
1.2k
30 天內沒有已合併 PR

貢獻指南

這個儲存庫沒有索引到貢獻指南

從這裡開始

  1. 先讀完整個 Issue，再讀專案的貢獻指南。
  2. 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
  3. Fork 儲存庫，在一個分支上完成修改。
  4. 送出 Pull Request，並在描述裡引用這個 Issue 編號。

javascript-tutorial/zh.javascript.info 的其他 Issue

查看 javascript-tutorial/zh.javascript.info 的全部 Issue

相似的 Issue

更多 Documentation Issue

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。