ES2017 Asynchronous Functions (`async`/`await`) The Right Way

Photo by Javier Allegue Barros on Unsplash

The introduction of Promises and async functions have significantly transformed the landscape of asynchronous JavaScript. The era of error-first callbacks, commonly referred to as “legacy APIs,” is now a thing of the past.

To put it simply, async functions can be seen as a convenient layer built on top of Promises. Their purpose is to provide a more intuitive syntax that mimics synchronous execution, making it easier to work with promise chains. Nevertheless, similar to Promises, the benefits of using async functions come at a cost. The presence of the async keyword necessitates the creation of multiple underlying Promises, which are crucial to enable the use of the await keyword within the function body.

In this story, we will discussion of best practices to async functions.

Convert callback-based to promise-bases

I saw many questions on Stackoverflow which have the same issue — await on a non-promise function.

const result = await getApiResult('url', (error, response) => {
  console.log(response) // json object
  // Check error, transform...
});
console.log(result); // undefined :(

Yes, may you know — async/await just a “sugar syntax” to handle Promises. I always repeat 2 things when…