Getting Started with Async/Await

Jamund Ferguson
Jul 21, 2016 · 3 min read
Image for post
Image for post

Inspired by the Zeit team’s post on the subject, my team at PayPal recently migrated our main server-side codebase to use Async/Await. I’m excited to share with you some of things we learned along the way.

Let’s start with some terminology:

  • Async function
  • Await keyword

People usually say async/await which is lovely and nice really, but you should know that they aren’t the same thing. There are async functions and there is the await keyword. They are certainly tied together in some ways, but async functions in particular can be used without await. How is that?

When you create a function with the async keyword that function will always return a Promise. When you return inside your async function it wraps your value in a Promise.

An async functions and its Promise-based Equivalent

Even if your code throws inside an async function it won’t automatically bubble up, instead it will return a rejected promise

In addition to converting your returns into a Promise, an async function is also special in that it’s the only place where you can use the await keyword.*

What is the await keyword? Await lets you pause the execution of an async function until it receives the results of a promise. This lets you write async code that reads in the order that it’s executed.

Await allows you to write asynchronous code with no callbacks at all. This makes your code much more readable. And await works with any promise, not just promises created by async functions.

Because an async function is a Promise, when you throw inside of an async function it’s swallowed up and returned as a rejected Promise.

If you are using await to call the Promise you can wrap it in try/catch or you’ll need to add a catch handler to the returned Promise.

Promise errors usually bubble up to their parent, so you usually only need that try/catch on your top-level Promise.

Taking advantage of the error handling properties of promises and the concise syntax of async functions can yield some powerfully simple results.

In this simplified example you can see how one might take advantage of the inherent error handling capabilities async functions to simplify error handling in an Express app

On my team at PayPal we usually handle errors with next(err). However with async/await we can simply throw errors anywhere in the code and the router will forward them to the next function provided by Express. This is a huge simplification.

Moving from callbacks to promises and async/await has condensed error handling in our app and will improve comprehension for our more complicated code paths. It took me a couple of hours to migrate most of our routes from plain callbacks to this new approach. Really the only thing you need to get started is a solid knowledge of Promises and an understanding of how to setup babel.

I eagerly await hearing your experiences with these newfangled functions and believe they are going to be one of my favorite tools in the JavaScript toolbox moving forward.

* Top-level await is not allowed in the current spec (Though there has been some discussion about possibly allowing this in the future).

freeCodeCamp.org

This is no longer updated.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store