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
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!
