Javascript Async/Await program order

Question

const function1 = () => new Promise(function(resolve,reject) { setTimeout(() => { resolve(10) },6000) }); const function2 = async () => { console.log("first"); const val = await function1() console.log("second"); return val } console.log("third -- " ,function2())

I was exepecting the order of the message as below:

first second third -- Promise { <pending> }>

But it turns out to give the below output:

first third -- Promise { <pending> } second

can anyone please help me understanding this ?

@CharlieFish, my understanding is when i am calling "function2" after it print the message "first", it should have waited for "function1" to be resolved and then should execute message "second"; but it seems like "function2" skipped that and returned an unresolved promise and later it came back and executed the message "second" — lavender
– lavender, Commented Oct 3, 2018 at 15:47
@lavender that is exactly what is happening, because you didn't wait (or await) until the promise resolved and just logged out the pending Promise. I think this video of MPJ does a great job explaining how the confusing part of Promises work. youtu.be/2d7s3spWAzo — Producdevity
– Producdevity, Commented Oct 3, 2018 at 15:52

Ben Randle · Accepted Answer · 2018-10-04 14:29:33Z

rather than calling function2() you need to await on it

 await function2(); // logs first (6 seconds expire) second, 10

this is because you need to wait for function 2 to resolve the Promise before proceeding

you could do the following for the desired result

 const function3 = async () => { const third = await function2(); console.log( "third --", third ) } function3();

qiAlex · Accepted Answer · 2018-10-03 15:54:08Z

explanation of your code

console.log("first"); - goes first, I hope that there is no questions
when interpretator see this line const val = await function1() - it waits here and continue to execute synchronous code with is console.log("third -- " ,function2()) and you can see third -- Promise { <pending> }
than promise is resolving and execution of async part continues and you finally can see console.log("second");

to achieve expected behavior try this:

const function1 = () => new Promise(function(resolve,reject) { setTimeout(() => { resolve(10) },6000) }); const function2 = async () => { console.log("first"); const val = function1() console.log("second"); return val } console.log("third -- " , function2())

Thanks for the explanation @qiAlex. Had i been use then instead of await, the message second would have been immediately executed. But await just blocks till the async code finishes, isn't it ?

Producdevity · Accepted Answer · 2018-10-03 15:49:25Z

It's in the logs buddy :)!

The log with the word third is logged second. Because the log with the word 'second' is resolved inside function2 which is called as a normal function. This code basically assumes you're not interested in the (async) result of function two, so it just retuns the pending promise.

Whenever you want the result (and not the pending promise) of an async function you should always await it of chain a then() where you can log the final result, which in this case is 10.

Sanchonn · Accepted Answer · 2018-10-03 16:03:34Z

Try next code

const function1 = () => new Promise(function (resolve, reject) { setTimeout(() => { resolve(10) }, 6000) }); const function2 = async () => { console.log("first"); const val = await function1() console.log("second"); return val; } const start = async () => { console.log("third -- ", await function2()); }; start();

Collectives™ on Stack Overflow

Javascript Async/Await program order

4 Answers 4

Comments

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Related