NodeJS Promise resolve unexpected behavior

Question

I have the following code, which does not work as I expect.

const bar = () => console.log('bar')
const baz = () => console.log('baz')
const myPromise = new Promise((resolve, reject) =>
    resolve('should be right after baz, before bar')
);
const foo = () => {
    console.log('foo')
    setTimeout(bar, 0)
    myPromise.then(resolve => console.log(resolve))
    baz()
}

foo()
console.log('before bar')

The result:

foo
baz
before bar
should be right after baz, before bar
bar

According to what's written in https://nodejs.dev/ , promise resolve will happen right after the function.

Promises that resolve before the current function ends will be executed right after the current function.

So I expect 'should be right after baz, before bar' to happen right after the end of foo(), before console.log('before bar'). Can someone explain why it doesn't?

Promises will never resolve in the same execution frame (by spec). Digging for more details. — spender, May 19 '22 at 10:31
calling `.then()` on a promise (or `await` or putting it in `Promise.all()` etc. interactions) does not "run" the promise. It's not a task that gets "activated". A promise already represents some async operation. It's a notification mechanism for its end status. That's it. With that said, your code does not really make much sense - you *could* make it output things in the way you expect, however, that's useless. You should ***NEVER*** rely on a specific way unrelated async tasks finish. — VLAZ, May 19 '22 at 10:32
"*promise resolve will happen right after the function.*" no, not *after the function*. It happens after the run-to-completion cycle. And the completion here is after `console.log('before bar')` — VLAZ, May 19 '22 at 10:35

Yousaf · Accepted Answer · 2022-05-19T11:13:28.797

Callbacks passed to setTimeout are added in the task queue whereas the callbacks related to promise fulfilment or rejection are added in the micro-task queue.

These queues are only processed after the synchronous execution of your script, i.e. the javascript code you wrote.

As a result, 'before bar' is logged before any asynchronous callbacks are invoked.

How your code executes?

Script execution starts.
Function bar, baz, and foo are defined. Promise constructor is also called which leads to the invocation of resolve function, resolving the promise synchronously
foo function is called
1. 'foo' is logged on the console
2. setTimeout is called, scheduling bar to be called asynchronously. bar will be added in the task queue
3. then method is called on myPromise, scheduling the fulfilment handler to be invoked asynchronously. This fulfilment handler is added in the micro-task queue
4. baz function is called, logging 'baz' on the console
foo function ends. Control return to the next line from where foo was called
Last console.log statement is executed, logging 'before bar' on the console
Script execution ends

At this point, console output is as shown below:

foo
baz
before bar

and the task queue contains a task to execute the bar function whereas the micro-task queue contans a micro-task to execute the fulfilment handler of the myPromise.

After the script execution ends, task and micro-task queues can be processed.

The micro-task queue is processed:

after each callback as long as the call-stack is empty (this is what nodejs.dev is referring to)
after each task

Script execution is a task and after its execution, micro-task queue will be the first one to be processed, logging 'should be right after baz, before bar' on the console.

At last, the task queue is processed, baz function is called, logging 'baz' on the console.

Following might be a helpful read to understand the micro-task and the task queue: JavaScript async callbacks - Promise and setTimeout

score 1 · Answer 2 · answered May 19 '22 at 10:34

The MDN documentation for Promise.prototype.then states (emphasis is mine):

Once a Promise is fulfilled or rejected, the respective handler function (onFulfilled or onRejected) will be called asynchronously (scheduled in the current thread loop).

You might find the snippet below enlightening:

Promise.resolve("I resolved").then((v) => console.log(v));
console.log("hello");

score 0 · Answer 3 · answered May 19 '22 at 15:59

If want to understand the asynchronous concept, you should check out this awesome video.

I'll try to explain to you the sequence of how the code is running here

First of all, we are Initializing all the variables with functions. Then we're calling foo(), and later console.log('before baz').

What will happen on calling foo is foo will enter the stack. And foo is logged into the console.

Then setTimeout(bar, 0) is being called. setTimeout(bar, 0) being asynchronous, will be called later and pushed in the callback queue(this will be called later when the stack is empty). That's why we didn't see the console of bar.

After this myPromise.then(resolve => console.log(resolve)) is called. And this is also an asynchronous call. So this will also be pushed to the callback queue.

Then baz() will be executed. And that's why we're seeing a log of baz after the foo.

Now remember, we've console.log('before bar') in the stack, so this will be logged first. And after this all the items in the callback queue will be called.

Three things are logged up to now:- foo baz before bar

Now, the good thing about promises is they are being prioritized in the callback queue, over anything. So even setTimeout is being called before the our promise, if promise is executed, it will be prioritized.

That's the reason why 'should be right after baz, before bar' is called before bar.

NodeJS Promise resolve unexpected behavior

3 Answers3

How your code executes?