JavaScript Academy · Aula

Streams legíveis

Consuma dados bloco a bloco.

Streams legíveis é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 1 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.

O que são fluxos?

A API de Fluxos processa os dados incrementalmente à medida que os blocos chegam, em vez de carregar tudo na memória. Isso permite lidar com grandes downloads, vídeos e transmissões ao vivo com eficiência.

O ReadableStream

Um ReadableStream é uma origem da qual você lê bloco a bloco. Os navegadores os disponibilizam em respostas de fetch, objetos blob de arquivos e outros recursos.

Criando um fluxo

Crie um usando um objeto de origem subjacente cujo start(controller) coloca blocos na fila e sinaliza a conclusão.

const stream = new ReadableStream({
  start(controller) {
    controller.enqueue("chunk 1");
    controller.enqueue("chunk 2");
    controller.close();
  }
});

Obtendo um leitor

getReader() bloqueia o fluxo e retorna um leitor. Enquanto ele estiver bloqueado, nenhum outro consumidor poderá lê-lo.

const reader = stream.getReader();

Lendo blocos

reader.read() retorna uma promessa que é resolvida como { value, done }. done se torna true quando o fluxo se esgota.

const { value, done } = await reader.read();
console.log(value, done);

O loop de leitura

Repita read() até que done seja verdadeiro para consumir o fluxo inteiro.

const reader = stream.getReader();
while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  console.log("got", value);
}

Liberando o bloqueio

Chame reader.releaseLock() para desbloquear o fluxo e permitir que outro leitor assuma o controle.

reader.releaseLock();

O método pull

Uma origem subjacente pode definir pull(controller), chamado quando o consumidor quer mais dados — permitindo uma geração sob demanda e preguiçosa.

let i = 0;
new ReadableStream({
  pull(controller) {
    controller.enqueue(i++);
    if (i > 5) controller.close();
  }
});

Iteração assíncrona

Em ambientes modernos, um ReadableStream pode ser percorrido de forma assíncrona, permitindo usar for await...of em vez de um loop manual.

for await (const chunk of stream) {
  console.log(chunk);
}

Cancelando um fluxo

reader.cancel(reason) interrompe o fluxo antes do fim e libera recursos — algo importante para abortar grandes downloads.

await reader.cancel("user navigated away");

tee: dividindo um fluxo

tee() retorna dois fluxos, cada um recebendo uma cópia de todos os blocos — útil para ler os dados duas vezes (por exemplo, para armazenar em cache e exibir).

const [a, b] = stream.tee();
// read a and b independently

Verificação rápida

Teste os fluxos legíveis.

Recapitulação: fluxos legíveis

Você criou um ReadableStream, obteve um leitor, consumiu blocos com read() em um loop, liberou o bloqueio, usou pull para obter dados sob demanda, percorreu o fluxo com for await e dividiu-o com tee(). A seguir: respostas de fetch em fluxo.

Perguntas Frequentes

A aula “Streams legíveis” é grátis?

Sim — o texto completo de “Streams legíveis” é 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 “Streams legíveis”?

Consuma dados bloco a bloco. 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 1 de 4.

Quanto tempo leva a aula “Streams legíveis”?

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