Home / Questions / 243352
Accepted
Trauma
Asked: 2020-03-07 06:16:46 +0800 CST 2020-03-07 06:16:46 +0800 CST

Incorrect return sequence using async/await

  • 772

I'm trying to understand how await/ works async. I have read several opinions that come to say

async/ awaitis nothing more than a sugar-syntax on Promises .

However, the output I'm getting collides head -on with this: I'm not able to explain the outputs of the following code (originally taken from here ).

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

async function demo( ) {
  console.log( 'Taking a break...' );
  await sleep( 2000 );
  console.log( 'Two seconds later' );
}

async function demo2( ) {
  console.log( 'demo2 -> before' );
  await demo( );
  console.log( 'demo2 -> after' );
}

function demo3( ) {
  console.log( 'demo3 -> before' );
  demo2( );
  console.log( 'demo3 -> after' );
}

demo3( );

The result obtained is:

demo3 -> before
demo2 -> before
Taking a break...
demo3 -> after
... 2 seconds pause ...
Two seconds later
demo2 -> after

However , the expected result is this one:

demo3 -> before
demo2 -> before
Taking a break...
Two seconds later
demo2 -> after
demo3 -> after

In some way that I don't understand, the use of async/ changes the order of the returns await! I can't think of any way, using only callbacks and closures , that would cause that behavior.

From the outputs, it seems that the function demo3( )returns before the function demo2( ), which is simply impossible according to the classic execution mode that I know.

How does it really async work / await? Is it really just a facility to use Promises ? Am I messing myself up looking los 3 pies del gato?

javascript

2 Answers

  1. Best Answer

    I'm going to remove the syntactic sugar from your code so it's clear what's being done:

    //se queda como está
function sleep( ms ) {
  return new Promise( resolve => setTimeout( resolve, ms ) );
}

function demoNoSugar() {
  console.log( 'Taking a break...' );
  let promesa = sleep(2000);
  return promesa.then(() => console.log( 'Two seconds later' ));
}


function demo2NoSugar() {
  console.log( 'demo2 -> before' );
  let promesa = demoNoSugar();
  return promesa.then(()=> console.log( 'demo2 -> after' ));
}

function demo3NoSugar( ) {
  console.log( 'demo3 -> before' );
  demo2NoSugar( )
  console.log( 'demo3 -> after' );
}

demo3NoSugar( );

    Steps:

    1. Execute demo3NoSugar, which puts in console 'demo3 -> before'.
    2. Execute demo2NoSugar, which puts in console 'demo2 -> before'.
    3. Execute demoNoSugar, which puts in cosola 'Taking a break...'.
    4. Execute sleep(2000), which returns a promise that will resolve in 2 seconds. Before returning it, it is attached in demoNoSugarthe order of writing 'Two seconds later'when resolved.
    5. Another write-to command is added to the resolution of that promise 'demo2 -> after'and demo2NoSugarreturned again.
    6. We're back at demo3NoSugar, which doesn't catch the promise, and just ends up writing to console 'demo3 -> after'.
    7. The promise is resolved and the two attached messages are written .

    Things to keep in mind:

    A function that has a async, always returns a Promise. Likewise, a function that returns a Promise, can be considered to be async(and therefore can be used with await):

    async function devuelve1() {
  return 1;
}

function devuelve2() {
  return new Promise(res => res(2));
}

let p1 = devuelve1();
p1.then(r => console.log(r));


async function aux() {
  let r = await devuelve2();
  console.log(r);
}

aux();

    • 11

  2. It's because you're not using await with demo2 ()

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

async function demo( ) {
  console.log( 'Taking a break...' );
  await sleep( 2000 );
  console.log( 'Two seconds later' );
}

async function demo2( ) {
  console.log( 'demo2 -> before' );
  await demo( );
  console.log( 'demo2 -> after' );
}

async function demo3( ) {
  console.log( 'demo3 -> before' );
  await demo2( );
  console.log( 'demo3 -> after' );
}

demo3( );

    As you can in the console you have:

    demo3 -> before
demo2 -> before
Taking a break...
Two seconds later
demo2 -> after
demo3 -> after

    The await, you should only not use it , for the function that you execute from the main (in this case the call to demo3)

    • 7