Offline UI Training in Bangalore | AchieversIT

Promises And Asyn-Await in Javascript03Aug

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 axiosThink we need to fetch a URL and console log the response. Here's how it looks using Promises inconst 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);

}

};

AchieversIT - Provides a wide group of opportunities for freshers and Experienced candidate who can develop their skills and build their career opportunities across multiple Companies.