Async / await in JavaScript makes async programming look synchronous. The code for importing a row of data using async / await pattern looks like below.

I am a late adopter of almost everything. For example, it was not until 2003 when I got my first mobile phone. And it was 2016 before I got started with React. For a long time, I used Promise API and did not bother using the async / await pattern. The equivalent code using Promise API is shown below.

Phew! Look at the construct. Not so neat. But, I was bullish about Promises and continued to use it over async / await till I encountered the need to execute promises in sequential fashion. To import a set of rows (sequentially), we can use Promise.all as follows.

Though the above code looks elegant, it does not execute in a sequential fashion. All promises resolve in parallel using Promise.all function. To serialise promises, I took the help of an article from HackerNoon: Resolving promises sequentially. Sure enough, there was a way. It involves using a reduce function to take a series of function invocations and execute it one by one. Yes, the code is a bit complicated to understand. But, this is where async / await pattern starts to make a lot of sense.

The above lines of code is as close as we think naturally. We wait for the current row to complete import before starting on the next row.

One area where I prefer the Promise API over the async / await pattern is when we have to catch an exception. Promise API has a catch block which is quite neat. Whereas we have to use the try / catch block while using the async / await pattern.

Why async / await is superior to Promise API
Tagged on: