Asynchronous Execution Order In Javascript
Solution 1:
Here's how your code executes:
Promise.resolve()
creates a resolved promise which puts() => console.log(2)
in the micro-task queuequeue: [ () => console.log(2) ]
The IIFE executes in which you have
await 6
. Awaiting 6 is similar to wrapping it inPromise.resolve(6)
and then awaiting it:await Promise.resolve(6)
.When the operand of
await
is not a promise,await
creates a native promise and uses the operand's value to resolve that promisequeue: [ resolve(6), () => console.log(2) ]
1
is logged on the consolequeue: [ resolve(6), () =>console.log(2) ] consoleoutput: 1
Second IIFE executes where you have
await console.log(3)
. This is likeawait undefined
becauseconsole.log(3)
will execute,3
will be logged on the console and the return value ofconsole.log
, i.e.undefined
will be awaited.In short, you are awaiting
undefined
.queue: [ resolve(undefined), resolve(6), () =>console.log(2) ] consoleoutput: 13
Promise.resolve()
creates a resolved promise which puts() => console.log(5)
in the micro-task queuequeue: [ () =>console.log(5), resolve(undefined), resolve(6), () =>console.log(2) ] consoleoutput: 13
4
is logged on the consolequeue: [ () =>console.log(5), resolve(undefined), resolve(6), () =>console.log(2) ] consoleoutput: 134
Script execution end
Event loop will now begin processing the micro-task queue
2
will be logged on the console because it was queued firstqueue: [ () =>console.log(5), resolve(undefined), resolve(6) ] consoleoutput: 1342
await 6
resolves with the value6
which is then passed toconsole.log
. As a result6
is logged on the consolequeue: [ () =>console.log(5), resolve(undefined) ] consoleoutput: 13426
Promise created as a result of
await console.log(3)
resolves with the value ofundefined
queue: [ () =>console.log(5) ] consoleoutput: 13426
5
is logged on the consolequeue: [ ] console output:134265
Done.
Note: Your code shouldn't rely on the timing and order in which different unrelated promises are resolved.
Solution 2:
1 is printed first because of order of execution.
3 is printed as code is executed because console.log()
is not an asynchronous operation. Does not matter if you put await in front of it.
4 is again printed because of order of execution.
Now, rest of the order of execution is due to asynchronous operations. The 3 statements are printed in an asynchronous manner after the above 3 statements are executed.
Solution 3:
There are two sequences here: 1 3 4
and 2 6 5
. The first is produced on the first tick (before any promises have resolved, and the second on the second tick (after promise resolution).
(async() => await console.log(3))();
writes 3
to the log before the await, so the 3
appears before any promises resolve, and between 1 and 4 because of the order of the statements. (Note that the await
in this line resolves to undefined
, because console.log doesn't return anything).
For the sequence 2 6 5
, all of the console logs come after a promise resolves (or, equivalently, an await statement), and they're in natural order otherwise.
Post a Comment for "Asynchronous Execution Order In Javascript"