How does javascript async/await actually work?

Question

I have some code using javascript async/await:

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function fun1()
{
     console.log("dosomething1");
     await sleep(6000);
     console.log("dosomething2");
     return "returnfromfun1";
}
console.log(fun1());
console.log("hello");

According to the official document about async/await:

An async function can contain an await expression that pauses the execution of the async function and waits for the passed Promise's resolution, and then resumes the async function's execution and returns the resolved value.

I expect the following output:

dosomething1
//wait for 6 seconds
dosomething2
Promise { <state>: "fulfilled", <value>: "returnfromfun1" }
hello

But the actual output is:

dosomething1
Promise { <state>: "pending" }
hello
//wait for 6 seconds
dosomething2

It seems fun1 returns at the "await" line. Did I misunderstand the description in the official document? And it seems I never get the return value of fun1("returnfromfun1").

fun1 is asynchronous, so just invoking it with console.log(fun1()); won't wait for it to resolve - either await it or call .then on it — CertainPerformance
– CertainPerformance, Commented Jul 23, 2019 at 9:01
"According to the official document" — That's a wiki anyone can edit, not an official document. The official documentation is here: ecma-international.org/ecma-262/9.0/… — Quentin
– Quentin, Commented Jul 23, 2019 at 9:02
asynchronous functions return promises. Calling the function returns the unresolved promise immediately, syncronously. The result of the promise can be retrieved inside a .then(), eg fun1.then((result) => {}) OR by awaiting it, eg var result = await fun1(). — TKoL
– TKoL, Commented Jul 23, 2019 at 9:05
aha,that document is too official, makes me headache even just having a peek:) — William
– William, Commented Jul 23, 2019 at 9:08
@JonasWilms Think so, it's very nearly the same thing - var result = foo(); (in that other question) does not wait for the async action to complete, just like console.log(fun1()); here does not wait for the async action to complete, though I guess there's also stackoverflow.com/questions/23667086/… — CertainPerformance
– CertainPerformance, Commented Jul 23, 2019 at 9:09

Jonas Wilms · Accepted Answer · 2019-07-23 09:30:57Z

3

You have to read the quoted part slightly differently:

An async function can contain an await expression that pauses the execution of the async function

Just the async function itself pauses execution, the function that called it goes on then.

If you think of a synchronous callstack, what happens is that the asynchronous functions context gets popped of, and stored somewhere else:

 stack: [init] -> [async] fun1 -> sleep -> setTimeout
  // The promise gets returned from sleep
 stack: [init] -> [async] fun1
 // The async function gets popped of
 stack: [init]
 hidden: [async] fun1
 // synchronous execution ends
 stack: -
 hidden: [async] fun1
 // the timer triggers, the promise gets resolved
 stack: setTimeout callback
 hidden: [async] fun1
 // synchronous execution ends
 stack: -
 hidden: [async] fun1
 // the promise resolves, the async fun1 context gets moved onto the stack
 stack: [async] fun1

It seems fun1 returns at the "await" line

Yes, exactly. In that moment it returns a promise, that resolves when the async function returns (after it continued execution somewhen).

And it seems I never get the return value of fun1("returnfromfun1").

You can get it when the promise resolves:

  fun1().then(result => console.log(result));

edited Jul 23, 2019 at 9:30

answered Jul 23, 2019 at 9:15

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

William Over a year ago

@JonasWilms, do you mean the Promise object returned from fun1 at await is that created in the sleep function? Can you point to an authority document that states await will return from the current async function with the Promise object created by the function following the await keyword?

Jonas Wilms Over a year ago

@william no, fun1 will create a promise internally and return that. The only "authority document" is the spec, for sure I could quote the relevant parts but I don't think that this will help you at your current stage of understanding (the spec is really, really hard to read)

William Over a year ago

even the promise is not the one created by sleep, it must be a copy of that, right? Because the promise gets resolved after 6 seconds.

Jonas Wilms Over a year ago

No. When the promise returned by sleep() resolves, the asynchronous function continues execution, returns, and internally resolves that internal promise. So they arent "copies" of each other.

William Over a year ago

Feel much better now. Thanks a lot, JonasWilms!

|

Collectives™ on Stack Overflow

How does javascript async/await actually work?

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related