javascript-tutorial / javascript-tutorial/zh.javascript.info
网络请求-3-fetch 下载进度 勘误
オープン
まだ誰も着手していません。
- 主要言語
- HTML
- スター
- 10.8k
- フォーク
- 1.2k
- PR マージ指標
- 30日以内にマージされた PR はありません
説明
原文链接: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}`)
}
// 以下略
コントリビューションガイド
このリポジトリのコントリビューションガイドは索引されていません
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
調査の方向性
https://zh.javascript.info/fetch-progress の fetch の進捗に関する記事から始め、response.body.getReader()、Content-Length、receivedLength を使用している例を確認してください。圧縮されたレスポンスを考慮するように説明または例を修正し、記載されている進捗計算が fetch によって返されるバイトストリームと一致することを確認してください。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- javascript
- 領域
- documentation
- issue の種類
- ドキュメント
- 難易度
- 2/5
- 見積もり時間
- 1〜3時間
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 45/100