Professional Documents
Culture Documents
Microtareas (Microtasks)
Microtareas (Microtasks)
Microtareas (Microtasks)
info/microtask-queue
Comprar EPUB/PDF
ES
15 de diciembre de 2021
Microtareas (Microtasks)
Los manejadores o controladores (en adelante controladores) de promesas .then / .catch / .finally
son siempre asincrónicos.
Incluso cuando una promesa es inmediatamente resuelta, el código en las líneas debajo de
.then / .catch / .finally se ejecutará antes que estos controladores.
1 let promise = Promise.resolve();
2
3 promise.then(() => alert("¡Promesa realizada!"));
4
5 alert("código finalizado"); // esta alerta se muestra primero
● La cola es first-in-first-out (FIFO), es decir, primero en entrar primero en salir: la tarea que entró primero
en la cola, será la primera en ejecutarse.
● La ejecución de una tarea se inicia sólo cuando no se está ejecutando nada más.
O, en palabras más simples, cuando una promesa está lista, sus controladores .then/catch/finally
se ponen en la cola; ellos aún no se ejecutan. Cuando el motor de Javascript se libera del código actual,
toma una tarea de la cola y la ejecuta.
1 de 4 24/3/24, 17:52
Microtareas (Microtasks) https://es.javascript.info/microtask-queue
alert("código terminado"
);
Si hay una cadena con múltiples .then/catch/finally , entonces cada uno de ellos se ejecuta de forma
asincrónica. Es decir, primero se pone en la cola, luego se ejecuta cuando se completa el código actual y se
finalizan los controladores previamente en la cola.
¿y si el orden es importante para nosotros? ¿Cómo podemos hacer que código finalizado se
ejecute después de ¡promesa realizada! ?
1 Promise.resolve()
2 .then(() => alert("promesa realizada!"))
3 .then(() => alert("código finalizado"));
Rechazo no controlado
Recuerdas el evento unhandledrejection del artículo Manejo de errores con promesas?
Ahora podemos ver exactamente cómo Javascript descubre que hubo un rechazo no controlado o unhandled
rejection
1 let promise = Promise.reject(new Error("¡Promesa fallida!"));
2 promise.catch(err => alert('atrapado'));
3
4 // no se ejecuta: error controlado
5 window.addEventListener('unhandledrejection', event => alert(event.reason
Pero si olvidas añadir el .catch , entonces, después de que la cola de microtareas esté vacía, el motor
activa el evento:
2 de 4 24/3/24, 17:52
Microtareas (Microtasks) https://es.javascript.info/microtask-queue
1 let promise = Promise.reject(new Error("¡Promesa fallida!"));
2
3 // Promesa fallida!
4 window.addEventListener('unhandledrejection', event => alert(event.reason
1 let promise = Promise.reject(new Error("¡Promesa fallida!"));
2 setTimeout(() => promise.catch(err => alert('atrapado')), 1000);
3
4 // Error: ¡Promesa fallida!
5 window.addEventListener('unhandledrejection', event => alert(event.reason
En el ejemplo anterior, .catch agregado por setTimeout también se dispara. Pero lo hace más tarde,
después de que unhandledrejection ya ha ocurrido, por lo que no cambia nada.
Resumen
El control de promesas siempre es asíncrono, ya que todas las acciones de promesa pasan por la cola
interna de “PromiseJobs”, también llamada “cola de microtareas” (término de V8).
Entonces, los controladores .then/catch/finally siempre se llaman después de que el código actual
ha finalizado.
En la mayoría de los motores de Javascript, incluidos los navegadores y Node.js, el concepto de microtareas
está estrechamente relacionado con el “bucle de eventos” o “event loop” y “macrotareas” o “macrotasks”.
Como estos no tienen relación directa con las promesas, están cubiertos en otra parte del tutorial, en el
artículo Loop de eventos: microtareas y macrotareas.
3 de 4 24/3/24, 17:52
Microtareas (Microtasks) https://es.javascript.info/microtask-queue
Comentarios
● Si tiene sugerencias sobre qué mejorar, por favor enviar una propuesta de GitHub o una solicitud
de extracción en lugar de comentar.
● Si no puede entender algo en el artículo, por favor explique.
● Para insertar algunas palabras de código, use la etiqueta <code> , para varias líneas –
envolverlas en la etiqueta <pre> , para más de 10 líneas – utilice una entorno controlado
(sandbox) (plnkr, jsbin, codepen…)
4 de 4 24/3/24, 17:52