Two Rules Of JavaScript Async/Await

Josh Pollock
Nov 1, 2018 · 3 min read
Image for post
Image for post

Ever wanted to write a JavaScript function that makes a HTTP request and then returns the results? Sounds simple, but the “and then” part of that sentence includes a lot of complexity. That is because when you make an HTTP request — it is performed asynchronously. This applies to jQuery AJAx, fetch, Axios, Nodes’s HTTPS module, etc.

I’m not going to cover callbacks and promises. I want to ask you to forget about all that and learn two rules. With those rules, and a modern JavaScript runtime, you can write a function that solves the requirement I gave before in a few, highly readable lines, using async/ await.

I say highly-readable because what I love about async/ await is that you can read the code and get a much easier sense of what is going on. Instead of understanding then/when/catch/error/whatever, you see the request on one line and on the next line you see what is done with it.

In this post, I’m going to give you two basic rules of async/ await and some practical examples of their use. It's a hard to explain this concept, but the code is short and readable, so you should be comfortable, when you're done to start experimenting with this new API.

Rule One Of Aysnc/ Await

https://gist.github.com/Shelob9/252011dff617b0fb9239865c6a045a37#file-1-js

Inside of this closure, we may use awaitbecause the async keyword is used when declaring the function.

The await keyword is the real magic of async/ await. Before you can use it — see rule two — you must know rule one. Rule one shows us how to create closure that can use the await keyword. How? We type the async keyword before a function.

Got that? That’s rule one, you’ll see examples when I explain rule two under the next heading.

Rule Two

https://gist.github.com/Shelob9/252011dff617b0fb9239865c6a045a37#file-2-js

In this example, line 7 will not run until the Promise created on line 6 has been resolved or rejected.

In this example, I’m using the fetch API, which creates a promise. That’s all been made invisible by using await. Instead of using a then() callback, I'm just awaiting the result of the function.

Notice that the before I declare the function I used the async keyword. That's another example of how rule one works. This function says async in front of it, so I can use await inside of it.

You can use this asynchronous function only inside of another asynchronous function. For example:

https://gist.github.com/Shelob9/252011dff617b0fb9239865c6a045a37#file-3-js

Inside of an async function, we can await the results of an async function.

For a more complete example, here is a more abstract version of getMostRecentPost() that works with any site and then another function that calls it twice and after awaiting those results, returns both posts.

https://gist.github.com/Shelob9/252011dff617b0fb9239865c6a045a37#file-4-js

One async function calling another async function using await.

That’s The Whole API! Use It!

Want to learn more? I’ll leave you with a Wes Bos video:


Originally published at Josh Pollock.

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

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