网络请求-3-fetch 下载进度 勘误
Dieses Issue hat noch niemand übernommen.
Bewertung
- Schwierigkeit
- 2/5
- Geschätzter Aufwand
- 1-3 Stunden
- Anfängerfreundlichkeit
- 45/100
- Issue-Typ
- Dokumentation
- Klarheit
- Größtenteils klar
- Aktivitätsstatus
- Veraltet
- Tech-Stack
- javascript
- Bereich
- documentation
Rechercherichtung
Beginne mit dem Artikel zum Fetch-Fortschritt unter https://zh.javascript.info/fetch-progress und überprüfe das Beispiel, das response.body.getReader(), Content-Length und receivedLength verwendet. Korrigiere die Erklärung oder das Beispiel so, dass komprimierte Antworten berücksichtigt werden, und bestätige, dass die dokumentierte Fortschrittsberechnung mit dem von fetch zurückgegebenen Byte-Stream übereinstimmt.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Beschreibung
原文链接：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}`)
}
// 以下略
- Vorherrschende Sprache
- HTML
- Sterne
- 10.8k
- Forks
- 1.2k
- PR-Merge-Kennzahlen
- Keine gemergten PRs in 30 T.
Beitragsleitfaden
Für dieses Repository ist kein Beitragsleitfaden indexiert
Erste Schritte
- Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
- Forken Sie das Repository und arbeiten Sie in einem Branch.
- Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.
Mehr aus javascript-tutorial/zh.javascript.info
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 68/100
-
Schwierigkeit 1/5 Unter einer Stunde Anfängerfreundlichkeit 62/100
javascript-tutorial/zh.javascript.info#1243 · 1 Kommentar ·
-
JSON.stringify完整语法-勘误 Offen
Schwierigkeit 1/5 Unter einer Stunde Anfängerfreundlichkeit 45/100
-
修改dom那一节，下面有一题，答案错误 Offen
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 45/100
javascript-tutorial/zh.javascript.info#1264 · 1 Kommentar ·
-
bezier-curve(贝塞尔曲线) 勘误 Offen
Schwierigkeit 1/5 Unter einer Stunde Anfängerfreundlichkeit 55/100
Alle Issues in javascript-tutorial/zh.javascript.info
Ähnliche Issues
-
triage
Schwierigkeit 1/5 1-3 Stunden Anfängerfreundlichkeit 88/100
-
enhancement
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 72/100
-
feature pydanty:is-working
Schwierigkeit 1/5 Unter einer Stunde Anfängerfreundlichkeit 88/100
pydantic/pydantic-ai#8647 ·
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 68/100
-
:watch: Not Triaged dotnet-fsharp/svc
Schwierigkeit 1/5 Unter einer Stunde Anfängerfreundlichkeit 90/100