JavaScript Academy · Aula

Iteradores assíncronos — for await...of e geradores assíncronos

Use geradores assíncronos e for await...of para consumir valores que chegam ao longo do tempo. Aprenda Symbol.asyncIterator e pipelines assíncronos simples

Aula 3 de 38 etapas

Iteradores assíncronos — for await...of e geradores assíncronos é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 3 de 3. 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 3 aulas no total.

Por que iterar de forma assíncrona

Objetivo: consumir valores que podem chegar mais tarde.

  • for await...of percorre iteráveis assíncronos
  • async function* cria geradores assíncronos
  • Symbol.asyncIterator marca um objeto como iterável assíncrono
  • Pequeno exemplo de map assíncrono
Iteradores assíncronos — for await...of e geradores assíncronos — ilustração 1

async function* e for await...of

Um gerador assíncrono (async function*) produz valores que for await...of consome.

// Use an async generator to yield values (could be delayed in real apps)
(async function () {
  async function* countAsync(n) {
    for (let i = 1; i <= n; i = i + 1) {
      // In real code you could await a delay or I/O here
      yield i;
    }
  }

  for await (const x of countAsync(3)) {
    console.log("async value:", x);
  }
})();
Iteradores assíncronos — for await...of e geradores assíncronos — ilustração 2

next() assíncrono manual

next() em um iterador assíncrono retorna uma promessa que é resolvida para { value, done }.

// Drive an async iterator manually with await it.next()
(async function () {
  async function* two() {
    yield "A";
    yield "B";
  }
  const it = two();
  console.log(await it.next()); // { value: "A", done: false }
  console.log(await it.next()); // { value: "B", done: false }
  console.log(await it.next()); // { value: undefined, done: true }
})();
Iteradores assíncronos — for await...of e geradores assíncronos — ilustração 3

Symbol.asyncIterator em objetos

Adicione [Symbol.asyncIterator](), que retorna um iterador assíncrono, para fazer um objeto funcionar com for await...of.

// Mark a plain object as async-iterable via Symbol.asyncIterator
(async function () {
  const AsyncTwice = {
    from: function (a, b) {
      return {
        a: a, b: b,
        [Symbol.asyncIterator]: async function () {
          let step = 0;
          return {
            next: async function () {
              if (step === 0) { step = 1; return { value: a, done: false }; }
              if (step === 1) { step = 2; return { value: b, done: false }; }
              return { value: undefined, done: true };
            }
          };
        }
      };
    }
  };

  for await (const v of AsyncTwice.from("X", "Y")) {
    console.log("from object:", v);
  }
})();
Iteradores assíncronos — for await...of e geradores assíncronos — ilustração 4

Fluxo map assíncrono

Componha geradores assíncronos para criar pequenos fluxos que aguardam cada etapa.

// Async map: transform values lazily while awaiting work
(async function () {
  async function* countAsync(n) {
    for (let i = 1; i <= n; i = i + 1) {
      yield i;
    }
  }

  async function* asyncMap(iterable, fn) {
    for await (const v of iterable) {
      // fn can be async; await its result
      const out = await fn(v);
      yield out;
    }
  }

  const doubled = asyncMap(countAsync(4), async function (x) {
    // simulate async transform (no real delay for demo)
    return x * 2;
  });

  const collected = [];
  for await (const v of doubled) {
    collected.push(v);
  }
  console.log("doubled async:", collected);
})();
Iteradores assíncronos — for await...of e geradores assíncronos — ilustração 5

Boas práticas

Dicas:

  • for await...of precisa de um iterável assíncrono (Symbol.asyncIterator).
  • Use async function* para definir geradores assíncronos com facilidade.
  • Cada next() é aguardado; mantenha o trabalho pequeno para preservar a responsividade.
Iteradores assíncronos — for await...of e geradores assíncronos — ilustração 6

Questionário sobre noções básicas de iteráveis assíncronos

Verificação rápida: requisito de um iterável assíncrono.

Iteradores assíncronos — for await...of e geradores assíncronos — ilustração 7

Recapitulação

Recapitulação: use async function* e yield para criar geradores assíncronos. Faça um laço com for await...of ou aguarde next() manualmente. Crie pequenos fluxos assíncronos com geradores auxiliares.

Iteradores assíncronos — for await...of e geradores assíncronos — ilustração 8
Grátis para começar

Aprenda JavaScript com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos
59
Aulas
200

Perguntas Frequentes

A aula “Iteradores assíncronos — for await...of e geradores assíncronos” é grátis?

Sim — o texto completo de “Iteradores assíncronos — for await...of e geradores assíncronos” é 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 3 aulas no total.

O que vou aprender em “Iteradores assíncronos — for await...of e geradores assíncronos”?

Use geradores assíncronos e for await...of para consumir valores que chegam ao longo do tempo. Aprenda Symbol.asyncIterator e pipelines assíncronos simples 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 3 de 3.

Quanto tempo leva a aula “Iteradores assíncronos — for await...of e geradores assíncronos”?

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

  1. Protocolo iterável e for...of
  2. Funções geradoras, yield e pequenos pipelines
  3. Iteradores assíncronos — for await...of e geradores assíncronos
← Voltar para JavaScript Academy