JavaScript Academy · Lección

Microtareas y Promises

Descubra por qué las callbacks de las promesas se ejecutan primero.

Lección 3 de 413 pasos

Microtareas y Promises es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué es una microtarea?

Una microtarea es un trabajo diferido de alta prioridad. Los callbacks de Promise (.then, .catch, .finally) y queueMicrotask programan microtareas.

La regla clave es la siguiente: después de cada ejecución síncrona, se vacían todas las microtareas antes que cualquier macrotarea.

Los callbacks de Promise se ejecutan de forma diferida

Incluso una Promise ya resuelta programa su callback .then como una microtarea. No se ejecuta de forma síncrona.

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

Las microtareas tienen prioridad sobre las macrotareas

Esta es la regla de orden más importante. Un callback de Promise se ejecuta antes que un callback de setTimeout, aunque el temporizador se haya programado primero.

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

La cola de microtareas se vacía por completo

El bucle de eventos vacía toda la cola de microtareas antes de tomar la siguiente macrotarea. Varios callbacks de Promise se ejecutan juntos durante ese vaciado.

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

Promises encadenadas

Cada .then de una cadena programa una nueva microtarea cuando finaliza la anterior. Aun así, todas se ejecutan antes que cualquier temporizador pendiente.

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');

Microtareas programadas durante el vaciado

Si una microtarea programa otra microtarea, la nueva también se ejecuta durante el mismo vaciado, antes que cualquier macrotarea. La cola sigue vaciándose hasta quedar realmente vacía.

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

Los valores resueltos se transmiten

Un valor devuelto por un controlador .then se convierte en la entrada del siguiente controlador de la cadena, todo ello mediante microtareas.

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

async/await utiliza microtareas

El código posterior a un await se reanuda como una microtarea. Por eso, una continuación después de await se ejecuta antes que un temporizador programado previamente.

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

Una demostración combinada del orden de ejecución

Reúna todos los conceptos. Prediga el orden: primero lo síncrono, después todas las microtareas y, por último, la macrotarea.

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 qué es arriesgado dejar sin recursos a las macrotareas

Como las microtareas siempre se ejecutan antes que las macrotareas, una microtarea que programa microtareas sin fin puede bloquear los temporizadores y el renderizado. Mantenga finitas las cadenas de microtareas.

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 qué importa este orden

Saber que las microtareas se ejecutan antes que las macrotareas explica por qué los resultados de Promise aparecen antes que los callbacks de los temporizadores y por qué se producen errores de orden. La regla es sencilla: código síncrono, después vaciar todas las microtareas, luego una macrotarea y repetir.

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

Comprobación rápida

Un .then de Promise y un setTimeout(fn, 0) están pendientes. ¿Cuál se ejecuta primero?

Responde en la lección interactiva

Resumen: microtareas y Promises

Ha aprendido la regla de prioridad:

Las microtareas provienen de Promises y de queueMicrotask.
Toda la cola de microtareas se vacía antes que cualquier macrotarea.
Las continuaciones de async/await son microtareas.
Las cadenas infinitas de microtareas pueden bloquear los temporizadores y el renderizado.

Gratis para empezar

Aprende JavaScript con un tutor de IA — gratis

Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.

Cursos: 59
Lecciones: 200

Empezar a aprender gratis Ver el curso completo

Preguntas frecuentes

¿La lección «Microtareas y Promises» es gratis?

Sí — el texto completo de «Microtareas y Promises» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Microtareas y Promises»?

Descubra por qué las callbacks de las promesas se ejecutan primero. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar JavaScript Academy?

No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Microtareas y Promises»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?

Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a JavaScript Academy