Why `after resolve` is executed before than `after wait`?

Question

the code snippet likes below:

console.log('test')

async function async1() {
    console.log('before wait');
    await wait();
    console.log('after wait');
}

async function wait() {
    try {
        return await new Promise((res, rej) => {
            console.log('wait');
            rej('reject');
        });
    } catch (reason) {
        console.log(reason);
    }
}

async function test() {
    async1();
    console.log('before resolve');
    await Promise.resolve();
    console.log('after resolve');
}

test();

console.log('test end');

you can also run the code in playground

actual result:

[LOG]: "test" 
[LOG]: "before wait" 
[LOG]: "wait" 
[LOG]: "before resolve" 
[LOG]: "test end" 
[LOG]: "reject" 
[LOG]: "after resolve" 
[LOG]: "after wait"

I thought after wait would be printed first, since it is pushed in the micro task queue early?

where am I wrong?

I took advice from @Seblor

It may become clearer if you replace the async/await with the then function.

then I removed all the async/await

console.log('test')

function async1() {
    console.log('before wait');
    return wait().then(() => {
        console.log('after wait');
    })
}

function wait() {
    return new Promise((res, rej) => {
        console.log('wait');
        rej('reject');
    }).catch((reason) => {
        console.log(reason);
    })
}

function test() {
    async1();
    console.log('before resolve');
    Promise.resolve().then(() => {
        console.log('after resolve');
    })
}

test();

console.log('test end');

Then I realized the first code pushed in micro task queue is the code in catch , followed by console.log('after resolve'), finally console.log('after wait')

Why are you calling `async1()` from within `test`? Did you mean to `await` it? — Bergi, Mar 22 '23 at 13:33
"*I thought "after wait" would be printed first, since it is pushed in the micro task queue early?*" - no, the first code that is pushed to the micro task queue is the one that logs "reject". — Bergi, Mar 22 '23 at 13:37
@Bergi I didn't mean to `await` , I met a likely case in my work, so I was just casually writing the `async1` to simulate the scenario I encountered. 'the first code that is pushed to the micro task queue is the one that logs "reject"' that enlightened me, thanks — YJ Cai, Mar 22 '23 at 17:21

Seblor · Accepted Answer · 2023-03-22T11:39:15.057

Okay I had a hard time spotting it but I think I get it.

So we all agree where the issue is, the problem you see is that the promise rejection is executed before the promise that resolves, but the 'after resolve' is printed before 'after wait'.

The thing is that even though there are 2 promises, there are 3 micro tasks here. The first one is the return await new Promise(, the second one is await Promise.resolve(), and the 3rd one is the awaiting of the call to the function: await wait().

The call to wait() returns a promise, which you await, creating a new microtask that is queued AFTER await Promise.resolve().

So the rejecting promise finished, printing 'reject', then the resolving promise finished, printing 'resolve', and finally the returned promise from wait() is awaited, printing 'after wait'.

It may become clearer if you replace the async/await with the then function. So this:

async function async1() {
    console.log('before wait');
    await wait();
    console.log('after wait');
}

Would be written like this:

function async1() {
    console.log('before wait');
    return wait().then(() => {
        console.log('after wait');
    });
}

So in order of execution (of the micro tasks only):

await new Promise((res, rej) => { registers the 1st Promise
await Promise.resolve() registers the 2nd Promise
The 1st Promise is rejected, printing 'reject'
Since the 1st promise returns, we can finally register the then callback, creating the 3rd microtask.
The 2nd Promise is resolved, printing 'after resolve' since that's synchronous code
The 3rd micro task is executed, printing 'after wait'

It's clearer indeed to replace the async/await with the then function ! Really helpful~ — YJ Cai, Mar 22 '23 at 17:08

score -3 · Answer 2 · edited Mar 23 '23 at 07:39

In given snippet, it is not waiting for Promise.resolve() to return any response because it is not waiting for any operation. To get rid of this we can simply use chaining of functions like

async function async3() {
    return new Promise(async(res, rej)=>{
        console.log('before wait async3');
        await wait();
        console.log('after wait async3');
        res()
    })
}
    
async function async2() {
    return new Promise(async(res, rej)=>{
        console.log('before wait async2');
        await wait();
        console.log('after wait async2');
        res()
   })
}
    
async function async1() {
    return new Promise(async(res, rej)=>{
         console.log('before waitasync1 ');
         await wait();
         console.log('after waitasync1');
         res()
    })
}
    
async function wait() {
    try {
        return await new Promise((res, rej) => {
            console.log('wait');
            rej('reject');
        });
    } catch (reason) {
        console.log(reason);
    }
}
    
async function test() {
    await async1();
    await async2();
    await async3();
}
    
test();

[Never pass an `async` function as the executor to `new Promise`!](https://stackoverflow.com/q/43036229/1048572) — Bergi, Mar 22 '23 at 17:35
Also please fix the indentation of the code, this makes the answer really hard to read — Bergi, Mar 22 '23 at 17:36

Why `after resolve` is executed before than `after wait`?

2 Answers2