CODEWITHSUNDEEP
javascript
Richard C
Richard C

Reputation: 171

new to js - understanding async await syntax

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

Upvotes: 0

Views: 39

Answers (3)

OwChallie
OwChallie

Reputation: 15559

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

Upvotes: 1

Quentin
Quentin

Reputation: 943193

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

Upvotes: 0

Peter
Peter

Reputation: 1249

The resolve method of the new Promise you can imagine as a returnvalue. 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 Promiseusage. Keep it like this.

Upvotes: 0

Related Questions