Promises And Asyn-Await in Javascript

 In this blog, you will learn about what Async/Await is in javaScript, what it really is, and how it works behind the scenes.

Before I start with Async/Await, I would suggest you understand what is Promises in JavaScript Because you need to understand Promises before you can understand how to use Async/Await

Right Now you need to understand What is Promise in JavaScript

A promise is an object that may produce a single property in the future or after some time. Either it will be a resolved value or a rejected value

Promises are better for handling asynchronous operations in the Applications and they provide error handling better than callbacks functions. In other words, Promises makes JavaScript asynchronously, which makes this language versatile

Working With Promises

Let us understand promise with an example
Suppose that you promised to lose 10 kgs of weight in the next two months

 

Promises will have 3 possible states:

• Pending: You don't know if you will lose 10 kgs in 2 months
• Resolved: You lost 10 kgs within 2 months
• Rejected: You haven't lost your 10 kgs at all

Initially, the promise was in a pending state, which indicates that the Promise hasn’t been completed yet. It ends with either resolved/fulfilled (successful) or rejected (failed) state.

Now Comming Back to ASYNC/ AWAIT

ASYNC/AWAIT How it works & SYNTAX

const asyncFunction = async () => {

// to handle errors in async/await we use to try and catch block


try {

// we will store only resolved value in resolved the  value variable

const resolvedValue = await promise;

}

catch (rejected value) {
// handle only rejected value (error) here

}

}
 

If you write the async keyword before the function then the function will be converted into an asynchronous function

If you see the async keyword before the function, then only you can write await keyword within the function

When you await the Promise the function will wait in a non-blocking (asynchronous) way until the promise returns a value either resolved (fulfilled) or reject

If the promise is resolved, you get the resolved value back. If the promise is rejected, the rejected value is thrown which is nothing but an error.

REAL-WORLD USE CASE USING Axios

Think we need to fetch a URL and console log the response. Here's how it looks using Promises in

const fetchUrl = (URL) => {

return axios

.get(url)

.then((response) => {

console.log(response.data);

})

.catch((err) => {

// Handle Error Here

console.error(err);

});

};
 

And here's the same thing using async/await functions:

const fetchUrl = async (url) => {

try {

const response = await axios.get(url);

console.log(response.data);

} catch (err) {

// Handle Error Here

console.error(err);
}
};

If you notice the above code snippets of Promises and Async/Await functions all the callbacks functions are gone

CONCLUSION:

• Async/Await allows us to write asynchronous JavaScript code that reads much more clearly, is efficient, and is easy to understand. Also, it makes sure that the function will always return a promise.

I hope you have learned something new! If you found this article useful, be sure to share, follow

Thank you for reading!