javascriptpromiselanguage-lawyerasynchronous-javascript

Does the JS engine create a new microtask that will execute every handler chained together in a Promise object when resolve is invoked?


I recently encountered this question on Stack Overflow, asking about how the then method really works in JavaScript. The responder, Trincot, made the following comment:

The host will check which job queues have entries, giving precedence to job queues with high priority. A Promise job queue has a very high priority, typically higher than the event queue that deals with user interaction or other external events. So, the job that was placed in the queue at step 4 above is taken out of the Promise Job queue. This job will sequentially call the callback functions that have been registered as then callbacks (such as the one registered in step 7) on the myPromise object.

If I understood his explanation correctly, whenever the resolve function is invoked, JavaScript will schedule a microtask (or a job) in the job queue, which will execute all the callbacks passed to then, including chaining, when the call stack is empty. For example:

Promise.resolve("Hi")
    .then(() => {
        console.log("Hi");
    })
    .then(() => {
        console.log("World");
    });

In this case, the promise is resolved immediately, which means that a microtask will be scheduled immediately. When the then callbacks finish execution, the JS engine will check for any microtasks in the queue. Since the promise was resolved immediately, it will execute the microtask, which in turn executes all the handlers passed to the then method. As a result, the code will output "Hi" and "World".

However, why does this code output "1 3 2 4" instead of "1 2 3 4"?

const p1 = Promise.resolve();
const p2 = Promise.resolve();
p1.then(() => {
    console.log(1);
}).then(() => {
    console.log(2);
});
p2.then(() => {
    console.log(3);
}).then(() => {
    console.log(4);
});

I believe the code should output "1 2 3 4" instead of "1 3 2 4". This is because, when p1 and p2 resolve, two microtasks are enqueued. As the then callbacks finish execution, they add these callbacks to their internal lists. Once the call stack is empty, the JS engine selects the oldest task from the queue and executes it. This task should execute all the then handlers passed to that specific Promise instance. However, it doesn't seem to be happening as expected. Could someone explain to me the reason behind this behavior?

Thanks for your time and have a great day!


Solution

  • when p1 and p2 resolve, two microtasks are enqueued.

    That is a misunderstanding. A microtask (a promise job) is enqueued when:

    So when the first two statements have executed, there is nothing added to the promise job queue yet.

    Realise that:

    It may help to identify the promises returned by then() calls with a variable, and also name the callback functions.

    This would make your script look like this:

    const p1 = Promise.resolve();
    const p2 = Promise.resolve();
    const q1 = p1.then(function p1_then() { console.log(1) });
    const r1 = q1.then(function q1_then() { console.log(2) });
    const q2 = p2.then(function p2_then() { console.log(3) });
    const r2 = q2.then(function q2_then() { console.log(4) });
    

    Here is a simplified view on what happens in that script:

    Context Action p1 p2 q1 r1 q2 r2 Promise Job Queue
    Script p1 = Promise.resolve() F - - - - - -
    p2 = Promise.resolve() F F - - - - -
    q1 = p1.then(p1_then) F F ? - - - p1_then
    r1 = q1.then(q1_then) F F ? ? - - p1_then
    q2 = p2.then(p2_then) F F ? ? ? - p1_then,p2_then
    r2 = q2.then(q2_then) F F ? ? ? ? p1_then,p2_then
    Host get job p1_then F F ? ? ? ? p2_then
    p1_then console.log(1) F F ? ? ? ? p2_then
    p1_then (return) F F F ? ? ? p2_then,q1_then
    Host get job p2_then F F F ? ? ? q1_then
    p2_then console.log(3) F F F ? ? ? q1_then
    p2_then (return) F F F ? F ? q1_then,q2_then
    Host get job q1_then F F F ? F ? q2_then
    q1_then console.log(2) F F F ? F ? q2_then
    q1_then (return) F F F F F ? q2_then
    Host get job q2_then F F F F F ? -
    q2_then console.log(4) F F F F F ? -
    q2_then (return) F F F F F F -
    Host nothing to do F F F F F F -