Two Rules Of JavaScript Async/Await

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

You Must Use The await Keyword Only In Closure That Is Declared With The async keyword.

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

Inside Of An async Closure, If Another async Function Is called With The await Keyword, The Next Line Will Not Run Until That Line’s Promise Has Resolved.

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:

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.

One async function calling another async function using await.
fetch API

That’s The Whole API! Use It!

In this post, you learned two rules of async/ await and that’s all you need to know to use this powerful new feature of JavaScript. It will make your code simpler in a lot of cases.

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

Also published on Medium.

One Reply to “Two Rules Of JavaScript Async/Await”

  1. I struggle with this issue a lot and avoided jumping into promises as JS is already complex as is. This looks like a straight forward solution that I can get on board with! 🙂

    This might also help with time outs – which was an issue I was having this week where I was running logic to parse an CSV but it would freeze any other functionality from happening. So I figured out how to use a web worker to run a function in the background without disabling the rest of the app. I think async/await will be a great solution to try when I have lighter logic that won’t bog down the browser. Thanks for sharing

Leave a Reply

Your email address will not be published. Required fields are marked *