js 新手 - 了解 async await 语法

Question

I am attempting a basic concept that is still eluding me... In the option (that is commented out) including the Start().then... I'm able to nest the functions so that they start and end in the desired order. In the await version, they start & end in the appropriate order but I'm not clear how I'm meant to put in log the resolve text after each one has completed. Sorry this is basic...

console.log("Synchronous result.");

function Start() {
  return new Promise(function (resolve) {
    console.log(`Starting the Start`);
    setTimeout(() => resolve("Start has finished"), 5000);
  });
}

function Middle() {
  return new Promise(function (resolve) {
    console.log(`Starting the Middle`);
    setTimeout(() => resolve("Middle has finished"), 2000);
  });
}

function End() {
  return new Promise(function (resolve) {
    console.log(`Starting the End`);
    setTimeout(() => resolve("End has finished"), 1000);
  });
}

// this works in the traditional promise method

/*
Start().then((result) => {
  console.log(result),
    Middle().then((result) => {
      console.log(result),
        End().then((result) => {
          console.log(result);
        });
    });
});
*/

// now trying async/await
async function workflow() {
  let call1 = await Start();
  let call2 = await Middle();
  let call3 = await End();
}

workflow();

Answer 1

Well, you almost have it. In an async function, the await will return the result of the promise. So all you have to do is do the console.log after.

 console.log("Synchronous result."); function Start() { return new Promise(function (resolve) { console.log(`Starting the Start`); setTimeout(() => resolve("Start has finished"), 5000); }); } function Middle() { return new Promise(function (resolve) { console.log(`Starting the Middle`); setTimeout(() => resolve("Middle has finished"), 2000); }); } function End() { return new Promise(function (resolve) { console.log(`Starting the End`); setTimeout(() => resolve("End has finished"), 1000); }); } // this works in the traditional promise method /* Start().then((result) => { console.log(result), Middle().then((result) => { console.log(result), End().then((result) => { console.log(result); }); }); }); */ // now trying async/await async function workflow() { let call1 = await Start(); console.log(call1); let call2 = await Middle(); console.log(call2); let call3 = await End(); console.log(call3); } workflow();

Answer 2

The resolve method of the new Promise you can imagine as a return value. In this case you returning strings, what gets assigned to the variables call1 call2 call3 . You can resolve any valid javascript data structure.

// now trying async/await
async function workflow() {
  let call1 = await Start();
  console.log("call1: ", call1);
  let call2 = await Middle();
  console.log("call2: ", call2);
  let call3 = await End();
  console.log("call3: ", call3);
}

workflow();

As you get a bit more hands on, you can also discover the Promise.all() and Promise.allSettled() .

The async/await is the moder way of Promise usage. Keep it like this.

Answer 3

await XXX evaluates to be the resolved value of the promise XXX.

So the variables you've named callX contain the resolved values.

 console.log("Synchronous result."); function Start() { return new Promise(function (resolve) { console.log(`Starting the Start`); setTimeout(() => resolve("Start has finished"), 5000); }); } function Middle() { return new Promise(function (resolve) { console.log(`Starting the Middle`); setTimeout(() => resolve("Middle has finished"), 2000); }); } function End() { return new Promise(function (resolve) { console.log(`Starting the End`); setTimeout(() => resolve("End has finished"), 1000); }); } // this works in the traditional promise method // now trying async/await async function workflow() { let call1 = await Start(); console.log({call1}); let call2 = await Middle(); console.log({call2}); let call3 = await End(); console.log({call3}); } workflow();