How Await keyword work in situation that it show before every other function

Question

Question:

I am new in working with async keyword.

Below is the example make me confused. In my understanding, with async keyword, program would wait until the function after await.

So, I expected "Show at the end" would only show up at the very last.

Q: But why does "Show at the end" occur first? Is there a full explanation behind this?

Below is my present code:

function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}

async function asyncCall() {
  
  const result = await resolveAfter2Seconds();  //The whole program would stop here until the resolveAfer2Seconds finish
  console.log('calling');
  console.log(result);
}

asyncCall();

console.log('Show at the end') //My expectation is this will only print at the end, as we got a await inisde asyncCall

Here is the result:

Show at the end
resolved
calling

`asyncCall` will return a Promise that resolves once `asyncCall` finishes ... awaiting inside `asyncCall` has no effect on the code that calls `asyncCall` - if you need to wait for `asyncCall` to complete, you would `await asyncCall()` — Jaromanda X, Sep 24 '22 at 06:18
Why does awaiting inside asyncCall have no effect on the code that calls asyncCall ? — Ae Leung, Sep 24 '22 at 06:21
Is it to do with callstack ? I am not familiar with it and make sense with call stack yet. I just guess — Ae Leung, Sep 24 '22 at 06:22
no, it's to do with how async functions work ... effectively, they IMMEDIATELY return a Promise - and if you don't await it or use its `.then` then the code just continues executing without waiting for the code inside the async function to "resolve" — Jaromanda X, Sep 24 '22 at 06:25
if it worked the way you think then the code would somehow turn asynchronous results into synchronous ones - i.e. the impossible — Jaromanda X, Sep 24 '22 at 06:27

score 1 · Accepted Answer · answered Sep 24 '22 at 06:39

1

In simple terms:

asyncCall is an asynchronous method itself. Just like resolveAfter2Seconds can be awaited, asyncCall can be awaited too.

But if it is not, then the rest of the execution will continue.

If you want to make use of anything that is returned from resolveAfter2Seconds, you have to write it inside asyncCall after await. Think how convenient it would be to scope together all the code that requires something from an asynchronous call and the rest of the code can continue.

answered Sep 24 '22 at 06:39

Tushar Shahi

16,452
1
18
39

Thanks! I also heard that how async work in deeper is actually to do with call stack. May I know do you know about it ? – Ae Leung Sep 24 '22 at 07:00
https://stackoverflow.com/questions/21607692/understanding-the-event-loop https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop#:~:text=JavaScript%20has%20a%20runtime%20model,languages%20like%20C%20and%20Java. These two links will help you better than what i can write – Tushar Shahi Sep 24 '22 at 07:02
Just dont get confused with the async keyword, it is just a way of writing promises. Whatever holds true for promises does hold true for these functions with async keyword – Tushar Shahi Sep 24 '22 at 07:03

score 0 · Answer 2 · answered Sep 24 '22 at 06:58

I think it is about the whether you understand the idea of asynchronous.

Here is my new way of looking at the model of asynchronous.

The idea about async function is to make code that requires a certain process to be finished before proceeding separate from the rest of the code that doesn't require any other code to be finished.

And, Await keyword inside async function is to indicate which part of code need to be finished before proceeding.

With such, this make asynchronous robust

How Await keyword work in situation that it show before every other function

2 Answers2