A Quick Lesson on Async/Await

Learning Modern JavaScript: A Guide to Async/Await”

JavaScript has come a long way since its inception in the late 1990s. With each new version of the language, new features and capabilities are added that make it easier and more efficient to write code. One of the most useful features introduced in recent years is async/await.

Async/await is a language feature that allows developers to write asynchronous code in a synchronous-like style. It’s essentially a shorthand syntax for working with promises, which are a fundamental part of JavaScript’s async behavior. With async/await, you can write code that looks like it’s executing in a linear, top-to-bottom fashion, even if it’s actually being executed asynchronously.

 

So, what exactly is async/await and how does it work?

The “async” keyword is used to define an async function.

An async function is essentially a function that returns a promise. When you call an async function, the code inside the function will be executed asynchronously, but you can use the await keyword to pause the execution of the function until a promise is fulfilled.

Here’s an example of how you might use async/await to asynchronously fetch data from an API:

In this example, the fetch() function is called to retrieve data from an API endpoint. The await keyword is used to pause the execution of the getData() function until the promise returned by fetch() is fulfilled.

Once the promise is fulfilled, the response.json() function is called to parse the response into JSON format, and the await keyword is used again to pause the execution of the function until this promise is fulfilled. Finally, the data is returned to the caller.

One of the benefits of using async/await is that it makes it easier to read and understand async code. Without async/await, you would need to use the .then() method to handle the fulfillment of a promise, which can be difficult to read and understand when you have multiple layers of nested .then() statements. With async/await, you can simply use the await keyword to pause the execution of the function until a promise is fulfilled, making the code much easier to follow.

Another benefit of async/await is that it makes it easier to write error handling code. When you use the .then() method to handle the fulfillment of a promise, you need to use the .catch() method to handle any errors that may occur. With async/await, you can use a try/catch block to handle errors in a more familiar and intuitive way.

Here’s an example of how you might use a try/catch block with async/await:

In this example, the try block contains the code that makes the async call to the API. If an error occurs during the execution of this code, the catch block will be executed and the error will be logged to the console. This makes it easier to handle errors in async code, as you don’t need to use the .catch() method and can instead use a familiar try/catch block.

There are a few important things to keep in mind when working with async/await.

Firstly, you can only use the await keyword inside an async function. If you try to use it outside of an async function, you’ll get a syntax error.

Secondly, you should always wrap calls to async functions in a try/catch block to handle any errors that may occur.

Finally, you should be aware that async/await is built on top of promises, and you’ll still need to understand how promises work in order to effectively use async/await.

 

Takeaways

Async/await is a powerful language feature that makes it easier to write and understand asynchronous code in JavaScript. It’s a great tool to have in your toolbox, and with a little bit of practice, you’ll be able to use it to write clean, efficient async code in no time.