Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

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

Aberta
#1,246 0 comentários 0 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
2/5
Tempo estimado
1-3 horas
Facilidade para iniciantes
45/100
Tipo de issue
Documentação
Clareza
Razoavelmente clara
Status de atividade
Estagnada
Stack de tecnologia
javascript
Domínio
documentation

Direção de pesquisa

Comece pelo artigo sobre o progresso de fetch em https://zh.javascript.info/fetch-progress e revise o exemplo que usa response.body.getReader(), Content-Length e receivedLength. Corrija a explicação ou o exemplo para levar em conta respostas compactadas e confirme que o cálculo de progresso documentado corresponde ao fluxo de bytes retornado por fetch.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

原文链接：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}`)
}

// 以下略
Linguagem predominante
HTML
Estrelas
10.8k
Forks
1.2k
Nenhum PR com merge em 30d

Guia de contribuição

Nenhum guia de contribuição indexado para este repositório

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de javascript-tutorial/zh.javascript.info

Todas as issues de javascript-tutorial/zh.javascript.info

Issues semelhantes

Mais issues de Documentation

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.