Why async / await is superior to Promise API

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

async function validateAndImportRow(row) {
  const isValid = await validateRow(row);
  if (isValid) {
    await import(row);
  }
  return isValid;
}

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.

function validateAndImportRow(row) {
  let isValid;
  return validateRow(row)
  .then(isValid2 => {
    isValid = isValid2;
    if (isValid) {
      return importRow(row);
    }
  })
  .then(() => {
    return isValid;
  });
}

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.

const promises = data.map(row => validateAndImportRow(row));
Promise.all(promises);

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.

async function importData(data) {
  data.forEach(row => {
    await validateAndImportRow(row);
  });
}

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.

promise.then(doSomething)
.catch(logError);