Why I always prefer async/await

How to handle asynchronicity in JavaScript.

MustSeeMelons
Nov 14 · 4 min read
Photo by Clément H on Unsplash

What is it?

It is a way to write asynchronous code in Javascript. The language itself is single threaded and blocking by nature, meaning that there is only one thing happening at any given moment.

The environment creates the asynchronous nature with the help of the event loop. This loop is provided by the browser in each tab, by NodeJS on each process ans is a core concept of Javascript, we won’t be going in to the details of how exactly it works, but looking at the ways to use it for asynchronous code.

How many options are there?

In this day and age there are multiple options on how to handle asynchronous operations:

  • using callbacks
  • using Promises
  • using async/await

So, why do I prefer the latter? Let’s check them all out.

Callbacks

We can pass in a function, which will be executed at a later time. Lets look at a REST API call as an example. We have our API object with the different routes and a API call.

This does not look so bad now, does it? It doesn’t, if there is just one thing to be done and can be a useful design pattern in some scenarios.

But what if we have to do a chain of actions? Then it quickly breaks apart and we are welcomed by the callback hell. This does not even have any error processing!

Depending on the requirements, this can get really ugly and hard to read, which leads to more bugs, more time spent when adding new logic and maintaining the whole thing.

Promises

Thankfully, the callback situation was seen as a problem and a remedy was created, called promises. They are a bit harder to understand, but understanding them is a must, if you wish to write clean, beautiful code. A great explanation of them can be found here. Lets use promises in place of callbacks for our ongoing cat API example:

Looks different, but feels similar as we are still passing functions, just one for success, one for the error case.

Promises have an ace up their sleeve — they are chainable, no longer we have to nest to infinity and back (though, you can still do it, if you prefer, you monster).

Get our cats, log them out, garble up their names and output them again. This looks and feels quite good now, though there is an even better way, even more straight forward.

Async/Await

This feels really good

With these two keywords, we can, as the name implies, await on a promise. There is a catch, the function has to be declared as async for it to work, though I think this is a small price to pay for extreme clarity.

What if we want to do multiple operations in a row?

Wait, you are not checking for errors. If a promise rejects, the error will be thrown, all we have to do is catch it somewhere.

I find that this type of code creates the least cognitive load while reading, as there is very little nesting, no callbacks involved and very little parenthesis to mess up.

JavaScript in Plain English

Learn the web's most important programming language.

MustSeeMelons

Written by

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade