Question

我正在尝试使用async和await按顺序运行两个代码块我在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个函数this.callingMom（）和this.callCreateData（）; 并期望2个函数的痕迹是顺序的

我期待以下输出

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函数可以用于两件事：primarilly：返回Promise，并且能够在其中使用await关键字。如果您没有使用await，或者您使用的唯一await是将要返回的Promise，那么根本就没有异步函数 - 只需使用普通函数返回一个承诺，就像你的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);

异步等待问题

1 个答案: