JS 中的异步/等待混淆

Question

I was learning asynchrony in JS and came across Async/Await. Then, I came across this code:

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

async function msg() {
  const msg = await scaryClown();
  console.log('Message:', msg);
}

msg(); // Message: 🤡 <-- after 2 seconds

Thus, I have questions on the above code. Firstly, how can async function msg() return message value if the function itself returns only undefined Promise, that is, the function does not explicitly use return keyword. Secondly, does await returns Promise or value itself having been unwrapped from Promise?

Answer 1

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

The above function is a function which returns a promise when it is called, but will only be resolved after 2 seconds.

async function msg() {
  const msg = await scaryClown();
  console.log('Message:', msg);
}

the above function is asynchronous function which awaits for the promise to be resolved (in your case, after 2 seconds) and then only the console.log() triggers.

Note : any lines of code below the function msg() gets executed irrespective of the promise and the asynchronous function.

Running code snippet

 function scaryClown() { return new Promise(resolve => { setTimeout(() => { resolve('🤡'); }, 2000); }); } async function msg() { console.log(scaryClown()); // try without await, so it will not wait for the result and prints first, but an unresolved promise const msg = await scaryClown(); // actual result which is resolved, because we awaited console.log('Message:', msg); // Prints once the resolved value is available. } msg(); //executes first but only prints the value once it is resolved. console.log('I will continue executing irrespective of async func msg()');

Answer 2

async function msg() {
  const msg = await scaryClown();
  console.log('Message:', msg);
}

await resolves promise and return resolved value. so above code with then can be written like below. hope this makes you understand async await.

function msg() {
  scaryClown().then(msg => {
    console.log('Message:', msg);
  });    
}

Answer 3

This is what happens:

When the async function (ie msg ) is invoked, it creates a promise object (let's call it P), which it will return when it deals with an await expression. scaryClown() executes, which sets the timer and returns yet another promise object; let's call it Q. Then await is processed: at that moment the function returns the promise P. This promise is not resolved at that moment; it is pending.

If then there is any other code that followed the call of msg() , then that is executed like would be the case after any function call. Execution continues until the call stack is empty.

Then, some time later the timer event that was scheduled by scaryClown() will fire, and the corresponding promise Q resolves. Because this promise Q was in an await expression, this resolution triggers a restoration of the execution context of msg() , where the await expression is now evaluated to be Q's resolved value, ie "🤡".

The variable msg gets this value assigned, and it is displayed with console.log . Then the function completes, in this particular case without any explicit return . Remember that the function had already returned , so this is not really a normal return: code execution really ends here, as there is nothing on the call stack. This makes the promise P resolve. If there had been an explicit return statement, with a value, the promise P would have been resolved with that value. But since there is no such return statement in your example, promise P resolves with undefined .

As you don't do anything with the value returned by msg() , you don't really see what it returns. If you would have done:

msg().then(console.log);

... you would have seen undefined in the console.

Your questions:

how can async function msg() return message value if the function itself returns only undefined Promise, that is, the function does not explicitly use return keyword.

The msg() call does currently not provide you with the message value. Instead it uses console.log to output it, but that is not the value returned by msg() . The returned value is a promise. Even if it had an explicit return keyword, it would still not make msg() return something else than a promise. The only difference would be what value that promise would eventually resolve to.

does await returns Promise or value itself having been unwrapped from Promise?

await does two things at two different moments in time. First it makes the function return to the caller. Then, when the promise that it awaits resolves, it makes the function continue to run again, and await represents at that moment the promised value , which can therefore be assigned to a variable (or used in another way).

I personally don't use the verb "unwrapped" when talking about promises. But yes, the expression await promise evaluates (asynchronously) to the value that promise fulfils to.