Hasta el día de hoy, pensé que sabía cómo funciona el bucle de eventos en javascript, pero me he enfrentado a un problema realmente extraño. Quizás no te resulte extraño, entonces te agradecería que me lo explicaras, así que aquí el ejemplo de código:
Promise.resolve() .then(() => { Promise.resolve().then(() => { Promise.resolve().then(() => { Promise.resolve().then(() => { console.log('first mega inner then') }) console.log('first very inner then') }) console.log('first inner then') }) console.log('first then') }) .then(() => { Promise.resolve().then(() => { Promise.resolve().then(() => { console.log('second very inner then') }) console.log('second inner then') }) console.log('second then') })¿Por qué el orden de console.logs es:
Yo personalmente esperaba que fuera:
Pero no es el final... Lo más interesante para mí es cuando agrego queueMicrotask después del segundo "entonces"
some code here... .then(() => { Promise.resolve().then(() => { Promise.resolve().then(() => { console.log('second very inner then') }) console.log('second inner then') }) console.log('second then') }) queueMicrotask(() => console.log('microtask'))SE EJECUTA DESPUÉS DEL PRIMER "ENTONCES", por lo que el orden ahora es:
¿Qué está pasando? No entiendo nada. Creo que esto es lo último que no entiendo en JS y te agradecería mucho si puedes explicar por qué funciona así, no podré dormir hasta que sepa esto 😂
Puede haber un malentendido de cómo se usa promesa aquí. En el encadenamiento de promesas, el método .then se activa tan pronto como se resuelve la promesa. Si desea retrasar la acción de la segunda parte de la cadena, debe especificar cuándo resolver en una nueva promesa. Este ejemplo muestra cómo funcionaría.
Cuando llama a Promise.resolve().then llama al método resolve de la clase Promise y hace que el método entonces esté disponible inmediatamente. Aunque no está retrasando la resolución cuando llama al método de resolución de inmediato, aún lleva algún tiempo realizar la resolución, por lo que la siguiente línea de código no se bloqueará.
Espero que esto proporcione una idea de la magia de Promise en js
(new Promise(resolve => { Promise.resolve().then(() => { Promise.resolve().then(() => { Promise.resolve().then(() => { console.log('first mega inner then') resolve(); }) console.log('first very inner then') }) console.log('first inner then') }) console.log('first then') })) .then(() => { Promise.resolve().then(() => { Promise.resolve().then(() => { console.log('second very inner then');; }); console.log('second inner then'); }); console.log('second then'); });