My Journey to Using Async / Await
I recently decided to add the async / await feature to my JavaScript tool belt; this is a story of why and how I did it.
If you don’t already know, async / await is one of the more prominent features of ES2017 / ES8 (finalized this past summer):
The purpose of async/await functions is to simplify the behavior of using promises synchronously and to perform some behavior on a group of Promises. Just as Promises are similar to structured callbacks, async/await is similar to combining generators and promises.
— -Mozilla
Why Now?
JavaScript is evolving quickly and sometimes it is difficult to decide if and when to adopt a new language feature in one’s own code. My general approach is to be a fast-follower; specifically I wait until a popular JavaScript library adopts a feature and then I wholeheartedly adopt it myself.
For example, Express’ Hello World example switched from using anonymous functions to arrow functions around October 2017 (so maybe it was time that I learn about arrow functions).
note: I actually picked up on arrow functions much earlier from learning React.
Along this same line, I recently was introduced to Koa.
Koa is a new web framework designed by the team behind Express, which aims to be a smaller, more expressive, and more robust foundation for web applications and APIs.
— Koa
Looking at their Hello World example; the async keyword jumped out at me. While I heard of the terms before, thought it was about time I learned about async / await.
const Koa = require('koa');
const app = new Koa();app.use(async ctx => {
ctx.body = 'Hello World';
});app.listen(3000);
Connection to Generators
When I started to research about async / await, I saw a number of connections to JavaScript generators; an ES6 / ES2015 feature that I never got around to learning (I never came across it in the libraries that I was using at the time; primarily React / Redux).
So, I found a classic article on JavaScript generators: The Basics of ES6 Generators (written in mid-2014). While I learned about generators, I did not find the connection to async / await (and generally did not see much benefit of them). Generally, generators are:
Generators are functions which can be exited and later re-entered. Their context (variable bindings) will be saved across re-entrances.
— Mozilla
Then I found the article, The Hidden Power of ES6 Generators: Observable Async Flow Control, It provided the connection that I was looking for between generators and async / await. It demonstrated that by coupling generators with promises (and a third-party library Co), one can reap the benefits of the much anticipated async / await feature in the as of then (mid-2016) unreleased ES2017 / ES8.
note: It took me a couple of reads to get the connection. Also, starting to read the Co documentation gave me an inferiority complex; luckily async / await is fairly straightforward itself.
Learning Async / Await
I read through a number of articles on async / await and got the general idea but none of them convinced me that I needed to use them. I was happy with organizing my asynchronous code using promises (I had previously suffered through callback heck and was thankful for promises).
Then, I read the article, 6 Reasons Why JavaScript’s Async/Await Blows Promises Away (Tutorial). Notwithstanding the inflammatory title, the article first is a tutorial on the async / await feature and then provides a number of real-world examples that illustrate the benefits of using it over more the traditional promise-only approach.
note: Got some feedback that I should emphasize a point. Despite the inflammatory title of the referenced article (about blowing away promises), async / await actually supplements promises. Might be better said it blows away a promise-only approach (but that might be even be a bit too strong).
Needless to say, I was convinced.
