Most of us as developers use these keywords in our daily lives while coding, so I thought to give it a brief from my own understanding. I hope you find this post useful by the end of this post. Let's go!π
What is Async ?
Let's understand with a basic example from our real world.
Most of us have ordered food online via Zomato, Swiggy, etc or did online shopping from several apps in market.
Assuming we ordered any food item, say Chicken Biryani(it's my fav, you can assume your fav food π).
- Step 1. Order Chicken Biryani from app.
- Step 2. Complete all formalities(filling details).
- Step 3. Ah, Chicken Biryani arrives.π
- Step 4. Eat it now alone. (don't share)π
Here when you order a food item, a promise is returned to you i.e. whether the food is ordered successfully or rejected(issue sometimes).
async
can be placed before a function. When you put async
before a function, it simply means that the function will return a promise. A resolved promise can have values wrapped inside it automatically.
async function greeting() {
return 'hello';
}
greeting().then(alert);
//hello
Here, this function returns a resolved promise with the result of hello
Why Async
You don't need to add complex multithreading if you add async
.
Async function gives the freedom of writing clear-cut and concise syntax.
- Simpler code than multithreading
- Debugging is easier
- Easy to scale
- Callback hell can be avoided
Why the need of async await when Promises can do the same job?
async/await
simply provides a synchronous feel to asynchronous code. We can say that async
works as syntactical sugar for promises.
// Async/Await
const asyncGreeting = async () => 'Hello';
// Promises
const promiseGreeting = () => new Promise(((resolve) => {
resolve('Hi');
}));
asyncGreeting().then(result => console.log(result));
promiseGreeting().then(result => console.log(result));
For simple queries and data manipulation, Promises can be simple, but if you run into scenarios where there's complex data manipulation and whatnot involved, it's easier to understand what's going on if the code simply looks as though it's synchronous, thats why async/await
come handy.
What is Await?
await
keyword is used only inside an async
function. await
makes asynchronous functions halt/pause and returns whatever the async function returns when it is done.
async function greeting() {
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("success!"), 1000)
});
let result = await promise; // wait until the promise resolves
alert(result); // "success!"
}
greeting();
await
literally suspends the function execution until the promise settles, and then resumes it with the promise result.
Advantages of Async/Await
- Makes non-blocking API look like blocking
- Clean and linear(understandable) syntax
- Easier to debug
- Maintainable code
Thats it!
I just tried to give you a little jist of what async/await
functions are. You can refer to docs to learn more.
I hope you find this post useful and informative. Share your feedback on comments section. If you have queries, reach out to me on linkedin , instagram, github, twitter. π
Top comments (1)
I am currently studying asynchronous JavaScript and I am having issues understanding the difference between callbacks, promises, async and wait.