Async...await with native promises?

I have just started learning async...await as a better easier to read way of handling asynchronous tasks. All good.

Then came an example of why the await operator is required. I understood the reasoning for this. What confused me though was the example given (below) that uses an async...await function, yesAwait() , with a native promise myPromise() in the code block.

  1. Is the point of async...await not that it returns a promise itself negating the need to use native promises?
  2. Is the yesAwait() function now therefore returning the promise of a promise?

I’m a bit confused by mixing the two promise types together…if anyone could help that would be great. Thanks!

Native promise code:

let myPromise = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(‘Yay, I resolved!’)
}, 1000);
});
}

async…await code that uses the native promise:

async function yesAwait() {
 let value = await myPromise();
 console.log(value);
}

yesAwait();

 // Prints: Yay, I resolved!

Yes, async...await is syntactic sugar to make working with promises easier. One of the points of this lesson is that you can continue to use them both in different scenarios. For example, you’re still going to come across a lot of libraries that use Promises directly, but you can still use await. There may be other times you still want to use Promise.all() too.

Correct, yesAwait() is still returning a promise. Even if you aren’t explicitly returning a value, it is still going to return a promise, and you can even chain then() statements to it if you wish. Mixing and matching is fine since it’s syntactic sugar.

Using your example:

let myPromise = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Yay, I resolved!');
    }, 1000);
  });
};

async function yesAwait() {
  let value = await myPromise();
  console.log('From inside yesAwait(): ' + value);
}

yesAwait().then(() => {
  console.log('yesAwait finished');
});

console.log('This will print first');

Outputs:

This will print first 
From inside yesAwait(): Yay, I resolved! 
yesAwait finished 
3 Likes

Thank you! Great explanation. The last example was useful.

In theory then, because async returns a promise, if you removed the promise from myPromise() and just had return 'yay i resolved! would that give the same output as your example?

1 Like

The final output would depend on a couple things, but one thing for sure is that the timing would be different. The 1 second delay between messages would be gone.

If we only changed this function:

let myPromise = () => {
  return 'Yay, I resolved!';
};

and didn’t change this line let value = await myPromise();, then the order of the output would be the same due to how the call stack works.

However, if you removed the await keyword also, then the order of output would change:

From inside yesAwait(): Yay, I resolved! 
This will print first 
yesAwait finished 

yesAwait() would still return a promise and chaining then() works fine.


If myPromise() was responsible for more than just returning a hard-coded string, such as making a fetch request or performing a database operation in order to return a value, then removing the Promise would be a bad idea.

Consider the following (imagine setTimeout was an asynchronous call to database function to get a value):

let myPromise = () => {
    setTimeout(() => {
      return 'Yay, I resolved!';
    }, 0);
};

Even though the timeout is 0ms yesAwait() would always output:

From inside yesAwait(): undefined 

This is the same whether we use await or not. If yesAwait() depended on that value, then it would be in trouble.

1 Like

Ok, makes sense. Thank you!