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.
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, 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:
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.
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: