issue with async await

Question

I am trying to make two block of code to run sequentially with async and await I have the code in stackblitz, open the console on Chrome to see the trace

let isMomHappy = true;
function willIgotNewPhone () {
    return new Promise( (resolve, reject) => {

        if (isMomHappy) {
            const phone = {
                brand: 'samsung',
                color : 'black'
            };

            resolve(phone);
        } else {
            const reason = new Error('mom not happy');
            reject(reason);
        }
    });
}

async  function showOff(phone) {
    return new Promise( (resolve, reject) => {
        const  message = ' Hey Friend I show  my phone ' + phone.brand;
        resolve(message);
    });
}


async function askMom() {
    return await new Promise( async (resolve) => {
        console.log('before asking Mom'); // log before
        await willIgotNewPhone()
            .then( function(fullfilled) {
                console.log('Got phone from mom ' + JSON.stringify(fullfilled));
            })
            .catch( function(error) {
                console.log(error.message);
            });
        console.log('after  asking Mom'); // afeter log
        resolve('END');
    });

}

let data: any[] = [];
async function createData() {
    return new Promise( (resolve, reject) => {

        for (let index = 0; index < 500000; index++) {
            const element: any = {};
            element.id = index;
            element.name = '' + index;
            data.push(element);
        }
        if (data && data.length > 0) {
            console.log('    ====== creating data size=%s', data.length);
            resolve(data);
        } else {
            reject( new Error('    ==== Creating data Error : empty'));
        }
    });
}


async function callCreateData() {
    return new Promise( async (resolve) => {
        console.log('    ======before creating data');
        await createData().then( (dataReturn: any[]) => {
            console.log('        ----datareturn length=%s', dataReturn.length);
        });
        console.log('    ======after creating data');
    });
}

async function callingMom() {
    await askMom().then( (str) => {
        console.log(str);
    });
}

callingMom();
callCreateData();

I am calling 2 functions this.callingMom() and this.callCreateData(); and expecting the traces of the 2 functions to be sequential

I was expecting the following output

before asking Mom
Got phone from mom {"brand":"samsung","color":"black"}
after  asking Mom
     =====before creating creating data
     ===== creating data size=500000
         ----datareturn length=500000
     ===== after creating creating data

but I got the output :

before asking Mom
    ======before creating data
    ====== creating data size=500000
Got phone from mom {"brand":"samsung","color":"black"}
        ----datareturn length=500000
    ======after creating data
after  asking Mom
END

Any idea what is my problem ?

Thanks

Answer 1

async functions can be used for two things, primarilly: to return a Promise, and to be able to use the await keyword inside. If you're not using await, or if the only await you're using is the Promise that's going to be returned, there's no point in having an async function at all - just use a normal function that returns a Promise, like in your willIgotNewPhone.

Also, in order to chain promises together, you need to use then. Simply calling asynchronous functions right after the other won't cause the thread to pause until they're done. Like this:

callingMom().then(callCreateData);

let isMomHappy = true;

function willIgotNewPhone() {
  return new Promise((resolve, reject) => {

    if (isMomHappy) {
      const phone = {
        brand: 'samsung',
        color: 'black'
      };

      resolve(phone);
    } else {
      const reason = new Error('mom not happy');
      reject(reason);
    }
  });
}

function showOff(phone) {
  return new Promise((resolve, reject) => {
    const message = ' Hey Friend I show  my phone ' + phone.brand;
    resolve(message);
  });
}


function askMom() {
  return new Promise(async (resolve) => {
    console.log('before asking Mom'); // log before
    await willIgotNewPhone()
      .then(function(fullfilled) {
        console.log('Got phone from mom ' + JSON.stringify(fullfilled));
      })
      .catch(function(error) {
        console.log(error.message);
      });
    console.log('after  asking Mom'); // afeter log
    resolve('END');
  });

}

let data = [];
function createData() {
  return new Promise((resolve, reject) => {

    for (let index = 0; index < 500000; index++) {
      const element = {};
      element.id = index;
      element.name = '' + index;
      data.push(element);
    }
    if (data && data.length > 0) {
      console.log('    ====== creating data size=%s', data.length);
      resolve(data);
    } else {
      reject(new Error('    ==== Creating data Error : empty'));
    }
  });
}


function callCreateData() {
  return new Promise(async (resolve) => {
    console.log('    ======before creating data');
    await createData().then((dataReturn) => {
      console.log('        ----datareturn length=%s', dataReturn.length);
    });
    console.log('    ======after creating data');
  });
}

function callingMom() {
  return askMom().then((str) => {
    console.log(str);
  });
}

callingMom().then(callCreateData);