René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"网络请求-3-fetch 下载进度 勘误","articleBody":"原文链接：https://zh.javascript.info/fetch-progress\n\n在Content-Encoding指定了某种压缩方式时，fetch提供的getReader中读取到的是解压缩*后*的二进制流，而Content-Length所指示的是解压缩前的请求体大小。\n\n在绝大多数场景，浏览器自动指示Accept-Encoding的情况下，不能直接使用Content-Length作为完整报文长度进行进度计算，而应当使用其它方式/响应头告知客户端完整的报文长度。\n\n原文中示例代码如下：\n\n```js\n// Step 1：启动 fetch，并获得一个 reader\nlet response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits?per_page=100');\n\nconst reader = response.body.getReader();\n\n// Step 2：获得总长度（length）\nconst contentLength = +response.headers.get('Content-Length');\n\n// Step 3：读取数据\nlet receivedLength = 0; // 当前接收到了这么多字节\nlet chunks = []; // 接收到的二进制块的数组（包括 body）\nwhile(true) {\n  const {done, value} = await reader.read();\n\n  if (done) {\n    break;\n  }\n\n  chunks.push(value);\n  receivedLength += value.length;\n\n  console.log(`Received ${receivedLength} of ${contentLength}`)\n}\n\n// 以下略\n```","author":{"url":"https://github.com/frankli0324","@type":"Person","name":"frankli0324"},"datePublished":"2025-06-07T11:25:27.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/1246/zh.javascript.info/issues/1246"}