What is Promises And Asyn-Await in Javascript

 

What is Promises And Asyn-Await in Javascript

In this blog, you will learn about what Async/Await 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 at 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 try and catch block


try {

// we will store only resolved value in resolvedValue variable

const resolvedValue = await promise;

}

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

}

}
 

If you write 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 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 clear, efficient, and 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!

If you want to learn UI Development, React, Angular, Node Js Please visit our website achieversIT 

Or Feel free to call us on +91 8431040457