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 摘要。