Understanding Async/Await in Javascript
Benefits of restructuring Promises with async and await
Promises in Javascript
A promise is commonly defined as a proxy for a value that will eventually become available.
In layman terms, a promise in Javascript is very much similar to a promise in real life. A promise is like a commitment which will either be fulfilled/resolved or rejected. Promises are designed to handle asynchronous code without encountering a callback hell.
Once a promise has been called, it will start in a pending state. This means that the calling function continues executing, while the promise is pending until it resolves, giving the calling function whatever data was being requested.
The created promise will eventually end in a resolved state, or in a rejected state, calling the respective callback functions (passed to then and catch) upon finishing.
Async/Await in Javascript
An async function is nothing different or new but a mere change in handling the promises. Async/Await is just a sugar coated way of writing promises.
When using chaining in promises, though it was somewhat better than callbacks it still might get messy when managing huge chunks of code. With async/await the chaining using .then() and .catch() is totally eliminated.
First let's recap on how the usual promises are written.
The Usual Promise
fetch("https://dummy.api");
.then(response => response.json());
.then(console.log);
.catch(err => console.log(err))
Promises in Javascript are written with the help of chaining.
.then()
tells what to do if the promise is fulfilled
.catch()
tells what to do if the promise is rejected
.finally()
tells what to do irrespective of the promise being fulfilled or rejected
It can be seen in the above code snippet that if the promise (i.e. fetching data from the url) is fulfilled, then convert the response to json and then the converted response is logged on the console. But, if the promise gets rejected and returns with an error then the error is printed on the console as can be seen in the .catch()
code.
Restructuring the Promise with async and await
const getData = async () => {
try{
const response = await fetch("https://dummy.api");
const data = response.json();
console.log(data);
}catch(err){
console.log(err);
}
}
With the usage of async/await in the function, one can get rid of the chaining part of the promises. This happens because of the two keywords async
and await
.
Async Keyword
The async
keyword when put in front of a function declaration turns the function into an asynchronous function. An asynchronous function knows to expect the possibility of the await
keyword being used to invoke asynchronous code.
The beauty of this usage lies in the fact that invoking an async
function always returns a Promise
i.e. their return values are guaranteed to be converted to Promises.
Await Keyword
The usage of async
becomes advantageous only when it is combined with the keyword await
. In Javascript, await
only works inside an async
function, and when written in front of the promise-based function, it pauses the code and waits till the promise is executed and returns with a value.
Depending upon the status of the promise whether it is fulfilled or rejected, the next code is executed. If the promise is fulfilled, then the following lines of code would be executed and if the promise is rejected, then the lines in the catch block would be executed.
Benefits of using async and await
Better Error Handling
Using async/await allows us to handle the synchronous code and asynchronous code in the same manner. If there's an error in resolving the promise, then the control will jump directly to the catch block to handle the error. Multiple promises can also be written in the same try block, and the code will catch the errors for all the promises, not just one. It also tells you where the error occurred, and in which promise.
Better Code
async
and await
allows us to write clear and more understandable code by making it look more like synchronous code. It can be seen clearly how much cleaner the code has become.
Moreover, when the code has conditional codes aswell, one can easily think of how much benefit can be gained by using the async/await
way of writting promises than the usual way
Keypoints
Adding
async
to a function means you’ll always return a promiseUsing
async
also enables the use of theawait
keyword, which allows you to wait until a promise is resolvedUsing the
await
keyword blocks the code from executing until the promise is resolved or rejected. If the promise cannot settle, it generates an exception which can be dealt withUsage of
async/await
makes the code more explicit, easier to understand, and more concise
Hope you understood the concept of Async and Await
Thank you for reading : -)