JavaScript Academy · Aula

Microtarefas e Promises

Aprenda por que os callbacks de Promises são executados primeiro.

Aula 3 de 413 etapas

Microtarefas e Promises é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 3 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 é uma microtarefa?

Uma microtarefa é uma tarefa adiada de alta prioridade. As funções de retorno de promessas (.then, .catch, .finally) e queueMicrotask agendam microtarefas.

A regra key: depois de cada execução síncrona, todas as microtarefas são processadas antes de qualquer macrotarefa.

As funções de retorno de promessas são adiadas

Mesmo uma promessa já resolvida agenda sua função de retorno .then como uma microtarefa. Ela não é executada de forma síncrona.

console.log('start');
Promise.resolve().then(() => console.log('promise then'));
console.log('end');

As microtarefas vêm antes das macrotarefas

Esta é a regra de ordenação mais importante. Uma função de retorno de promessa é executada antes de uma função de retorno de setTimeout, mesmo que o temporizador tenha sido agendado primeiro.

setTimeout(() => console.log('timeout (macro)'), 0);
Promise.resolve().then(() => console.log('promise (micro)'));
console.log('sync');

A fila de microtarefas é totalmente processada

O loop de eventos esvazia toda a fila de microtarefas antes de obter a próxima macrotarefa. Várias funções de retorno de promessas são executadas juntas durante esse processamento.

setTimeout(() => console.log('macro'), 0);
Promise.resolve().then(() => console.log('micro 1'));
Promise.resolve().then(() => console.log('micro 2'));
console.log('sync');

Promessas encadeadas

Cada .then em uma cadeia agenda uma nova microtarefa quando a anterior é liquidada. Mesmo assim, todas são executadas antes de qualquer temporizador pendente.

setTimeout(() => console.log('timeout'), 0);
Promise.resolve()
  .then(() => console.log('then 1'))
  .then(() => console.log('then 2'))
  .then(() => console.log('then 3'));
console.log('sync');

Microtarefas agendadas durante o processamento

Se uma microtarefa agenda outra microtarefa, a nova também é executada durante o mesmo processamento, antes de qualquer macrotarefa. A fila continua sendo esvaziada até ficar realmente vazia.

Promise.resolve().then(() => {
  console.log('micro A');
  Promise.resolve().then(() => console.log('micro B (added later)'));
});
setTimeout(() => console.log('macro'), 0);
console.log('sync');

Os valores resolvidos são transmitidos

Um valor retornado por um manipulador .then se torna a entrada do próximo manipulador na cadeia, tudo por meio de microtarefas.

Promise.resolve(2)
  .then(n => n * 3)
  .then(n => n + 1)
  .then(n => console.log('result', n));
console.log('sync first');

async/await usa microtarefas

O código depois de um await é retomado como uma microtarefa. Portanto, uma continuação aguardada é executada antes de um temporizador agendado anteriormente.

async function run() {
  console.log('a');
  await null;
  console.log('c (after await)');
}
setTimeout(() => console.log('d (timeout)'), 0);
run();
console.log('b');

Uma demonstração de ordenação combinada

Reúna tudo. Preveja a ordem: primeiro o código síncrono, depois todas as microtarefas e, por fim, a macrotarefa.

console.log('1 sync');
setTimeout(() => console.log('5 timeout'), 0);
Promise.resolve().then(() => console.log('3 promise'));
Promise.resolve().then(() => console.log('4 promise'));
console.log('2 sync');

Por que a inanição de microtarefas é arriscada

Como as microtarefas são sempre executadas antes das macrotarefas, uma microtarefa que agenda continuamente mais microtarefas pode impedir a execução dos temporizadores e a renderização. Mantenha as cadeias de microtarefas finitas.

let n = 0;
function loop() {
  if (n++ < 3) {
    console.log('micro ' + n);
    Promise.resolve().then(loop);
  }
}
setTimeout(() => console.log('macro after micros'), 0);
loop();

Por que essa ordenação é importante

Saber que as microtarefas são executadas antes das macrotarefas explica por que os resultados de promessas aparecem antes das funções de retorno de temporizadores e por que ocorrem erros de ordenação. A regra é simples: síncrono, depois processar todas as microtarefas, depois uma macrotarefa, e repetir.

console.log('A');
Promise.resolve().then(() => console.log('B'));
setTimeout(() => console.log('D'), 0);
console.log('C');

Verificação rápida

Uma promessa .then e um setTimeout(fn, 0) estão ambos pendentes. Qual é executado primeiro?

Responda na aula interativa

Recapitulação: microtarefas e promessas

Você aprendeu a regra de prioridade:

Microtarefas vêm de promessas e de queueMicrotask.
A fila inteira de microtarefas é processada antes de qualquer macrotarefa.
As continuações de async/await são microtarefas.
Cadeias infinitas de microtarefas podem impedir a execução dos temporizadores e a renderização.

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

Começar a aprender grátis Ver o curso completo

Perguntas Frequentes

A aula “Microtarefas e Promises” é grátis?

Sim — o texto completo de “Microtarefas e Promises” é 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 “Microtarefas e Promises”?

Aprenda por que os callbacks de Promises são executados primeiro. 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 4.

Quanto tempo leva a aula “Microtarefas e Promises”?

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