should we choose async await over Promise in Javascript

Question

I know that the async await is the new Promise in the town and it is a new way to write asynchronous code and I also know that

We didn’t ha

Answer 1

As most things go, the answer is "it depends".

Before talking about performance, the more important aspect is the maintainability of the code, and limitation of async/await vs raw Promise.

async/await is a great way to execute asynchronous code sequentially, while Promise enables you to run asynchronous code concurrently.

async function foo() {
  const a = await backend.doSomething()
  const b = await backend.doAnotherThing()
  return a + b
}

In the code above, backend.doAnotherThing() will not be executed until backend.doSomething() has returned. On the other hand:

function foo() {
  Promise.all([backend.doSomething(), backend.doAnotherThing()])
    .then(([a, b]) => {
       return a + b
    })
}

will execute both calls, and wait for both to complete.

As you mentioned about the benefits of async/await, I personally use it extensively. Except for the cases above.

If you need performance and to you, the performance difference between async/await vs Promise is more important than the readability benefit of async/await over Promise, by all mean go ahead.

As long as it is a conscious choice, you should be fine.

UPDATE: as mentioned by Derek 朕會功夫

You can get parallel execution with async/await by:

async function foo() {
  const p1 = backend.doSomething()
  const p2 = backend.doAnotherThing()
  return await p1 + await p2
}

Answer 2

Building on unional's answer:

You can achieve the same behavior as Promise.all with async/await

function foo() {
  Promise.all([backend.doSomething(), backend.doAnotherThing()])
    .then(([a, b]) => {
       return a + b
    })
}

async function foo() {
  const a = backend.doSomething()
  const b = backend.doAnotherThing()
  return await a + await b
}

Backend tasks happen concurrently and we wait on both to be finished before we return. See also the MDN example I wrote

Based on this I am not sure if there is any performance advantage to directly using Promises over async/await.

Answer 3

Your benchmark has nothing to do with the performance between async/await vs raw promises. All I can see is that throwing an error takes a longer time to compute. This is expected.

Back to the main question, should use async/await rather than .then with raw promises?

Keep in mind that async/await is merely syntactic sugar over raw promises, so there shouldn't be much impact on the overall performance. However, it does make your code more linear which removes a lot of cognitive overhead from the developer.

The conclusion is use what you prefer. Promises can be polyfill'd but new syntaxes cannot, so you might want to keep that in mind when deciding which style to use.

---

Some misunderstanding:

The error stack returned from a promise chain gives no clue of where the error happened

That is not true. A quick check with:

function error() {
    return new Promise(function(res, rej) {
        res(undefined()); // uh oh
    });
}

error().then(console.log, e => console.log("Uh oh!", e.stack));

shows the entire error stack including the location.