Welcome again readers to another blog post where I attempt to demystify and explain a technical topic. What async/await is and how to utilize it will be the main topics of this blog.
I believe it would be wise to take a step back and briefly explore how JavaScript operates before I explain what async/await is. As you may be aware, JavaScript executes your code synchronously, which means that it can only execute one line of code at a time and must wait for that line of code to finish before executing the next. This might cause some issues.
Synchronous JavaScript code has the potential to stall execution once it has begun doing something when it is run. To put it another way, long-running JavaScript functions can cause the user interface (UI) or server to become unusable until the function returns. This obviously has the potential to ruin the user experience.
For instance, if your code runs synchronously and your web page or application requests a list of posts from a server, it may cease working until you can retrieve the articles. Depending on your connection, this may take some time, during which time your user is unable to engage with your application.
Due to the utilization of Web APIs, we are able to run asynchronous JavaScript code to address this problem. The fetch api is one of the most used Web APIs for asynchronous programs. By returning a Promise, the fetch api enables you to execute asynchronous function. A Promise, put simply, is an object that signifies the success or failure of an asynchronous operation.
Here is a code sample that uses the fetch api:
A request is sent to the jsonkeeper api in the code above. an array of an object containing my name and age will be returned. In line 2 of the code, an HTTP request is made using the fetch api, which will eventually return a promise. Following the code in the first then() function (line 3) if the promise is successful, we will go on to the second then() method (line 4). Any time a promise is rejected or unsuccessful, our code will immediately move to the catch() method (line 7), where it will log the error to the console in this example. Although using the catch() method is not required, I strongly advise it because it enables you to give feedback to your user on the occurrence of an error.
I should eventually explain what async/await is after going down that rabbit hole—trust me, it goes much deeper. In essence, the new JavaScript feature Async/Await allows you to create asynchronous code in a synchronous manner. The code example I presented before, refactored to use async/await, is shown below.
Now let's go through the code:
In order to use async/await, you must first inform the JavaScript engine that this function will run some asynchronous code. The async keyword is added before our function to achieve this (line 1).
You must include a try/catch block in the async function code block if you intend to handle errors if the promise is rejected or unsuccessful (this is a must!). If the promises are fulfilled, the code in the try block will be executed; otherwise, we will leave the try block, enter the catch block, and run any relevant code there.
The try block currently contains the most crucial code. There are various constants in there. The promise provided by our HTTP request is contained in the first constant response (line 3), but in order for this to function, we must first add the await keyword before our retrieve function. When you want a promise in return, you need to include the await keyword. Using the data constant, we carry out the identical procedure once more (line 4). Our data constant, which in this case is an array of one object, includes the information we require at this point in the code execution.
We can use our data however we'd like now that it's been saved in a constant.
If you compare the two samples of code, you'll see that the async/await code is longer, especially when the try/catch statement is taken into account. However, utilizing async/await enables you to view the code in synchronous mode, which makes it easier for you to keep track of what is occurring in your code and what data is available at any given moment. Although the function I used as an example is extremely simple to comprehend, asynchronous code can become much more complicated than what I shown, and at that point, we can truly appreciate how powerful async/await is.
I appreciate you taking the time to read this post, and I hope it has given you a better knowledge of async/await and how to use it.
Top comments (1)
It was a good read. Good job.