Notes - Async Await

This post talks about a new language feature that was recently released into JavaScript called Async Functions. Async Functions are also known as async await. This language feature landed in ES8 which was just released in June of 2017.

If you are interested in checking out the spec then you can find the official documentation here. Also if you would like to follow along and contribute to new language features then you should take a look the Ecma TC39 group and their proposals repo to track all of this good stuff.

Alright, so this post is really just a culmination of notes and resources that I have taken the time to research around async await. This probably does not capture all of the features and possibilities of async await but hopefully others find it useful.

The Problem

Its important to remember that the group of people who are working on the new language features for JavaScript are not just creating new features for no reason. All of these new features are intended to solve a common problem that developers face.

The problem in this case is they wanted to improve on how we do async programming within JavaScript. Prior to Async Functions we simply had Promises and prior to that we had callbacks. Callbacks still are useful but when Promises were introduced back in 2015 😱 async programming in JavaScript got much better. However, sometimes if you are dealing with a lot of promises you can easily find yourself in a situation like this.

Now, using Async Functions we can convert the above situation into something like this.

But what about error handling? Now we can use try/catch to wrap these async calls.

Now we will get the following error message "Uh oh: result text should equal string".

Types of Async Functions

Now we understand why the Ecma TC39 group added this into JavaScript but now we want to take a look at all the different ways we can use these types of functions for handling async flows.

Async Functions

This type we have already gone over but we should start with this one and move to the others.

In order to use an Async Function one must use the keywords async and await. Also important to note that Async Functions always return a Promise.

Async Function Expressions

Below are two different ways of using async functions within expressions. One is assigned to a variable and the other is an Immediately Invoked Function Expression (IIFE).

Its important to note that with the Async Function Expression we can also simplify them a bit by using Arrow functions. Below is a quick example.

Classes

You also have the ability to use async functions within classes as well. Here is a quick example.

Important Tips

Async Functions are new and exciting but they also present some new scenarios that we need to understand and account for. Rather than try and explain all of these myself I’d rather point you in the direction of Axel Rauschmayer who wrote up a nice async function tips article highlighting all of these new scenarios and other gotchas.

Can we use it?

YES! Depending on how you are writing your JavaScript these days you have a couple different options.

Node.js shipped support for Async Functions in version 7.10.0, you can check it out on node.green by searching for async functions.

Also you can start using it on the client by using Babel and either the ES2017 preset or Env preset.

Browser Support

Below is current browser support for Async Functions.

  • Chrome - 55
  • Firefox - 52
  • Opera - 42
  • Edge - flag
  • Safari - 10.1

If you liked this article then please show some ❤️ with a follow below.