проблема с асинхронным ожиданием

Question

Я пытаюсь сделать два блока кода для последовательного запуска с асинхронным ожиданием. У меня есть код в stackblitz, откройте консоль в Chrome, чтобы увидеть след

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();

Я вызываю 2 функции, это.callingMom () и this.callCreateData ();и ожидая, что следы двух функций будут последовательными

Я ожидал следующий вывод

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

, но я получил вывод:

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

Любая идея, чтомоя проблема?

Спасибо

Answer 1

Функции

async могут использоваться для двух целей, в первую очередь: для возврата Promise и для возможности использования ключевого слова await внутри.Если вы не используете await, или если вы используете только await - это Обещание, которое будет возвращено, бессмысленно вообще иметь асинхронную функцию - просто используйте обычную функцию, которая возвращает ОбещаниеКак в вашем willIgotNewPhone.

Кроме того, чтобы объединить обещания вместе, вам нужно использовать then.Простой вызов асинхронных функций сразу после другой не приведет к приостановке потока, пока они не завершат работу.Как это:

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);