Async/await was introduced in NodeJS 7.6 and is currently supported in all modern browsers. I believe it has been the single greatest addition to JS since 2017. If you are not convinced, here are a bunch of reasons with examples why you should adopt it immediately and never look back.
For those who have never heard of this topic before, here’s a quick intro
- Async/await is a new way to write asynchronous code. Previous alternatives for asynchronous code are callbacks and promises.
- Async/await is actually just syntax sugar built on top of promises. It cannot be used with plain callbacks or node callbacks.
- Async/await is, like promises, non-blocking.
- Async/await makes asynchronous code look and behave a little more like synchronous code. This is where all its power lies.
Assuming a function
getJSON that returns a promise, and that promise resolves with some JSON object. We just want to call it and log that JSON, then return
This is how you would implement it using promises
And this is how it looks with async/await
There are a few differences here
Our function has the keyword
asyncbefore it. The
awaitkeyword can only be used inside functions defined with
asyncfunction returns a promise implicitly, and the resolve value of the promise will be whatever you
returnfrom the function (which is the string
"done"in our case).
The above point implies that we can’t use
awaitat the top level of our code since that is not inside an
await getJSON()means that the
console.logcall will wait until
getJSON()promise resolves and print its value.
Concise and clean
Look at how much code we didn’t write! Even in the contrived example above, it’s clear we saved a decent amount of code. We didn’t have to write
.then, create an anonymous function to handle the response, or give a name
datato a variable that we don’t need to use. We also avoided nesting our code. These small advantages add up quickly, which will become more obvious in the following code examples.
Async/await makes it finally possible to handle both synchronous and asynchronous errors with the same construct, good old
try/catch. In the example below with promises, the
try/catchwill not handle if
JSON.parsefails because it’s happening inside a promise. We need to call
.catchon the promise and duplicate our error handling code, which will (hopefully) be more sophisticated than
console.login your production-ready code.
Now look at the same code with async/await. The
catchblock now will handle parsing errors.
Imagine something like the code below which fetches some data and decides whether it should return that or get more details based on some value in the data.
Just looking at this gives you a headache. It’s easy to get lost in all that nesting (6 levels), braces, and return statements that are only needed to propagate the final result up to the main promise.
This example becomes way more readable when rewritten with async/await.
You have probably found yourself in a situation where you call a
promise1and then use what it returns to call
promise2, then use the results of both promises to call a
promise3. Your code most likely looked like this
value1it would be easy to flatten the promise nesting a bit. If you are the kind of person who couldn’t live with this, you could wrap both values 1 & 2 in a
Promise.alland avoid deeper nesting, like this
This approach sacrifices semantics for the sake of readability. There is no reason for
value2to belong in an array together, except to avoid nesting promises.
This same logic becomes ridiculously simple and intuitive with async/await. It makes you wonder about all the things you could have done in the time that you spent struggling to make promises look less hideous.
Imagine a piece of code that calls multiple promises in a chain, and somewhere down the chain, an error is thrown.
The error stack returned from a promise chain gives no clue of where the error happened. Even worse, it’s misleading; the only function name it contains is
callAPromisewhich is totally innocent of this error (the file and line number are still useful though).
However, the error stack from async/await points to the function that contains the error
This is not a huge plus when you’re developing on your local environment and have the file open in an editor, but it’s quite useful when you’re trying to make sense of error logs coming from your production server. In such cases, knowing the error happened in
makeRequestis better than knowing that the error came from a
A killer advantage when using async/await is that it’s much easier to debug. Debugging promises has always been such a pain for 2 reasons
You can’t set breakpoints in arrow functions that return expressions (no body).
If you set a breakpoint inside a
.thenblock and use debug shortcuts like step-over, the debugger will not move to the following
.thenbecause it only “steps” through synchronous code.
With async/await you don’t need arrow functions as much, and you can step through await calls exactly as if they were normal synchronous calls.
Last but not least,
awaitcan be used for both synchronous and asynchronous expressions. For example, you can write
await 5, which is equivalent to
Promise.resolve(5). This might not seem very useful at first, but it's actually a great advantage when writing a library or a utility function where you don't know whether the input will be sync or async.
Imagine you want to record the time taken to execute some API calls in your application, and you decide to create a generic function for this purpose. Here's how it would look with promises
You know that all API calls are going to return promises, but what happens if you use the same function to record the time taken in a synchronous function? It will throw an error because the sync function does not return a promise. The usual way to avoid this is wrapping
If you use async/await, you won't have to worry about these cases because await allows you to work safely with any value, promise or not.
Some valid skepticism you might have about using async/await is that it makes asynchronous code less obvious: Our eyes learned to spot asynchronous code whenever we see a callback or a
.then, it will take a few weeks for your eyes to adjust to the new signs, but C# had this feature for years and people who are familiar with it know it’s worth this minor, temporary inconvenience.
Follow me on twitter @imgaafar
This article was originally published on Hackernoon