JavaScript Academy · Aula

Respostas de fetch em fluxo

Processe respostas grandes à medida que chegam.

Respostas de fetch em fluxo é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.

Respostas são fluxos

Uma Response de fetch expõe o corpo como um ReadableStream por meio de response.body. Em vez de aguardar toda a carga, você pode processar os bytes à medida que chegam.

const res = await fetch("/big-file");
const stream = res.body; // ReadableStream of Uint8Array

Lendo o fluxo do corpo

response.body fornece blocos Uint8Array. Obtenha um leitor e repita o processo como em qualquer fluxo legível.

const reader = res.body.getReader();
while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  console.log("received", value.length, "bytes");
}

Acompanhando o progresso do download

Combine o cabeçalho Content-Length com os bytes recebidos para exibir uma barra de progresso.

const total = +res.headers.get("Content-Length");
let loaded = 0;
while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  loaded += value.length;
  console.log(Math.round((loaded / total) * 100) + "%");
}

Decodificando bytes em texto

Use TextDecoder para transformar blocos de bytes em strings. Passe { stream: true } para que caracteres multibyte divididos entre blocos sejam decodificados corretamente.

const decoder = new TextDecoder();
let text = "";
while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  text += decoder.decode(value, { stream: true });
}

Usando TextDecoderStream

É ainda mais simples: passe o fluxo de bytes por um TextDecoderStream para obter diretamente um fluxo de strings.

const textStream = res.body.pipeThrough(new TextDecoderStream());
for await (const chunk of textStream) {
  console.log(chunk);
}

Analisando NDJSON

O JSON delimitado por novas linhas transmite um objeto por linha. Armazene o texto em um buffer e emita linhas completas à medida que forem formadas.

let buffer = "";
for await (const chunk of textStream) {
  buffer += chunk;
  let nl;
  while ((nl = buffer.indexOf("\n")) >= 0) {
    const line = buffer.slice(0, nl);
    buffer = buffer.slice(nl + 1);
    if (line) console.log(JSON.parse(line));
  }
}

Tokens de LLM em fluxo

Esse padrão possibilita conversas de IA em fluxo: cada bloco é um token ou evento, renderizado no instante em que chega para criar um efeito de digitação ao vivo.

Abortando um fluxo de fetch

Passe um AbortSignal para fetch e chame controller.abort() para interromper um fluxo longo de forma limpa.

const controller = new AbortController();
fetch("/stream", { signal: controller.signal });
// later:
controller.abort();

Tratando erros de fluxo

Falhas de rede no meio do fluxo rejeitam a promessa de read(). Envolva o loop em try/catch para tratar interrupções.

try {
  while (true) {
    const { value, done } = await reader.read();
    if (done) break;
  }
} catch (err) {
  console.log("stream interrupted", err);
}

Quando não usar fluxos

Para respostas pequenas, res.json() ou res.text() é mais simples. Prefira fluxos quando as cargas forem grandes, progressivas ou ilimitadas.

O corpo da resposta só pode ser usado uma vez

Você só pode ler response.body uma vez. Chame res.clone() antes de ler se precisar dele duas vezes (por exemplo, para armazená-lo em cache).

const copy = res.clone();
await res.body.getReader().read();
// copy still readable

Verificação rápida

Teste o fluxo de fetch.

Recapitulação: fetch em fluxo

Você leu response.body bloco a bloco, acompanhou o progresso, decodificou bytes com TextDecoder/TextDecoderStream, analisou NDJSON, abortou com AbortController e tratou erros. A seguir: fluxos de transformação.

Perguntas Frequentes

A aula “Respostas de fetch em fluxo” é grátis?

Sim — o texto completo de “Respostas de fetch em fluxo” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.

O que vou aprender em “Respostas de fetch em fluxo”?

Processe respostas grandes à medida que chegam. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Respostas de fetch em fluxo”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de JavaScript Academy?

Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para JavaScript Academy