Asynchronous JavaScript: The Fundamentals of Async & Await
Welcome back! This week I’m going to take a little detour from the data structures and algorithms and talk about asynchronous JavaScript! I recently completed a code challenge and the challenge went into async and I realized I needed a deeper understanding of the topic. So I dug deeper and now I’m going to share my knowledge and help you understand Asynchronous JavaScript a little bit better! In particular, I’m going to cover async and await.
Introduction
Async and Await are two keywords that were introduced to JavaScript when version ES8/ ES2017 rolled out. It was a huge shift in asynchronous JavaScript programming and simplified the use of Promises and allows users to write Promise-based, asynchronous code that looks like synchronous code that blocks while waiting for network responses or other asynchronous events. Both keywords take efficient, Promise-based code and hides the Promises so that asynchronous code can be as simple to read and as easy to reason as synchronous code. Let’s start with async!
Async
The async keyword makes a function asynchronous and the return value of the function is a Promise. The function does not require Promise-related code in the body of the function in order to return a Promise. Async works in conjunction with await because you can only use the await keyword within functions that have been declared with the async keyword. Let’s look at an example of async in action!
If you look at the example, the readList function uses the async keyword and the return value is a Promise. Now, the only way to fulfill the Promise is to use the await keyword!
Await
The await keyword takes a Promise and turns it back into a return value or throw an exception. When given a Promise object, the await expression waits until the Promise is settled. If the promise is fulfilled, the fulfillment value of the Promise will be returned and if the promise is rejected, the rejection value will be thrown. The most important thing to remember about the await keyword is that it does not cause a program to block and do nothing until a Promise is settled, the code actually remains asynchronous and the await simply disguises this fact. This means that any code that uses await is itself asynchronous. This is why, as I stated earlier, the await keyword can only be used within an asynchronous function. Let’s look at an example using our readList function from earlier!
If you look at the example, I included the await keyword in the readList function that was made asynchronous using the async keyword. If you look at the console, you’ll see that the Promise that was returned is pending, which is a good example of my earlier point that await does not block a function from returning a value, the function is still asynchronous, it’s just hiding that fact.
Conclusion
I hope this helped you understand the basics of asynchronous JavaScript and in particular the async and await keywords. These are important keywords to learn and become familiar with because they are a vital part of almost all applications. Async is extremely common and a must learn for any software developer. I just hope that this was a helpful start on your road to understanding asynchronous programming. As always, I challenge you to continue learning and researching about async on your own. I hope you can join me next week!