09/05/2023, 15:30 Promise Vs Callback Vs Async/Await | by Mohit garg | Dev Genius
Published in Dev Genius
Mohit garg Follow
Jan 21 · 5 min read · Listen
Save
Promise Vs Callback Vs Async/Await
In this article I’m going to explain these three important concept of JavaScript after
reading this article your understanding about these concept will increase for sure .
So give it a read.
Promises
Promise is a Javascript object that represents the eventual completion(or failure) of
an asynchronous operation and its resulting value. It allows you to handle async
operations in a more elegant way and avoid callback hell problem.
Promise has two main states:-
https://blog.devgenius.io/promise-vs-callback-vs-async-await-ac30d1801eaa 1/6
09/05/2023, 15:30 Promise Vs Callback Vs Async/Await | by Mohit garg | Dev Genius
Pending :- initial state, neither fulfilled nor rejected
Settled :- fulfilled or rejected
Once a promise is settled, it can’t change its state again.
Promise provides two methods to handle the outcome of the promise.
then: to attach callbacks for the fulfilled state of the promise
catch: to attach callbacks for the rejected state of the promise
When to use Promise:
Retrieving data from an API using fetch() and returning the result as a promise.
Once the data is received, the then() method can be used to process the data and
update the UI.
Handling multiple async operations in parallel using Promise.all(). For example,
if you want to fetch data from multiple APIs and display them on the screen, you
can use Promise.all() to wait for all the data to be received and then process it.
Want more basic understanding of promises? Let’s see the real life example of
Promise:-
lets say we have two characters Jack & Jill and they promise their grandparents
to fetch some water from the well at the top of the hill. They started on their
mission to get it.
In the meantime, the grandparents are busy discussing the daily routine and
want to start cooking once the kids are back with the water.
Now there are two possibilities:-
Jack and Jill come down with the water, and the cooking starts.
They can’t get water due to some mishappening
So in this story , there is a promise of getting the water using the activity of fetching
it. The promise can get fulfilled(getting the water) by the kids or be rejected due to
the disaster . Will you notice while they are getting water grandparents were not
sitting idle.
https://blog.devgenius.io/promise-vs-callback-vs-async-await-ac30d1801eaa 2/6
09/05/2023, 15:30 Promise Vs Callback Vs Async/Await | by Mohit garg | Dev Genius
The Javascript Promise also works similarly .We create them to fetch
something(data from a data store ,configurations).Usually, the fetching may not
happen instantly. We want to fetch things asynchronously. It means we don’t want to
wait for the response, but we can continue work
Callback
Callbacks are a way of passing a function as an argument to another function, and it
gets executed
Open in app after the first function has completed. It is one of the most common
Get unlimited access
ways of handling async operations in JavaScript. Callback functions are commonly
used as a means of continuing processing after an asynchronous operation has
completed.
When to use callback:
Setting a timer using setTimeout() and passing a callback function that will be
executed after the specified time has elapsed.
Registering an event listener on a DOM element, and passing a callback
function that will be executed when the event occurs.
Want more basic understanding of callbacks in javascript? Let’s see the real life
example of callback with the Robin and PizzaHub story.:-
Robin, a small boy from Wonderland, loves to eat pizza. One morning he picks
up his mother’s phone and orders pizza using the PizzaHub app. Robin selects
his favorite cheese barbeque pizza and press the order button.
The PizzaHub app registers the order and informs Robin that it will notify him
when the pizza is ready and on the way. Robin, the happy boy, waits for a while
and finally gets a notification confirming that the pizza is on its way!
So, if we break down the story, the sequence of events goes like this:
Robin orders the pizza
The app notes down the order
PizzaHub prepares the pizza, and it is ready after a while.
The app notifies Robin, confirming the pizza is on the way.
https://blog.devgenius.io/promise-vs-callback-vs-async-await-ac30d1801eaa 3/6
09/05/2023, 15:30 Promise Vs Callback Vs Async/Await | by Mohit garg | Dev Genius
The mechanism of notifying Robin about the pizza works by using the callback
function.
Async/Await
Async/await is a more recent addition to JavaScript, and it’s built on top of Promises.
It allows you to write asynchronous code that looks and behaves like synchronous
code, using the keywords “async” and “await”. The “async” keyword is used to define
an async function, and the “await” keyword
11 is1 used to pause the execution of an
async function until a promise is resolved.
With async/await, the code inside an async function is executed in a synchronous-
like way, making it more readable and easier to understand. It also helps to avoid
the callback hell problem.
You can declare a function with the async keyword. Within an async function, you
can then use the await keyword to wait for a promise to be resolved before
continuing to the next line of code.
When to use async/await:
Retrieving data from an API using fetch() and awaiting the result before
processing the data and updating the UI.
Handling multiple async operations in sequence using async/await. For
example, if you want to fetch data from an API, process it and then send it to
another API, you can use async/await to handle this sequence of operations in a
more readable way.
Handling errors in async operations using try-catch block.
Let’s use a real-world example to illustrate the use of async/await. Imagine that you
have a morning routine composed of 5 activities:
1. Take a shower
2. Eat breakfast
3. Get dressed
4. Put on makeup
5. Check the news
https://blog.devgenius.io/promise-vs-callback-vs-async-await-ac30d1801eaa 4/6
09/05/2023, 15:30 Promise Vs Callback Vs Async/Await | by Mohit garg | Dev Genius
Before you can go to work, you need to do all 5 of these activities. But, there are
really two ways that you can go through these activities:
1. Doing each one in a row
2. Completing all 5 as fast as possible, no matter the order.
Perhaps you (or someone you know) likes to choose the second method
But, this would probably be disastrous in real life. What if you tried to start getting
dressed before you finished showering? How the heck would that work?
So, it is probably best that when we use code to represent this scenario, we make
sure that all 5 activities happen in order. We COULD do this with promises, but the
async/await pattern may do a better job of showing the logic.
Conclusion
In summary, promises, callbacks, and async/await are all ways to handle
asynchronous operations in JavaScript, with promises providing a more elegant way
of handling async operations, callbacks being a more traditional way, and
async/await providing a more convenient and readable way of handling async
operations.
Follow Mohit garg, for more articles on web development, JavaScript concepts
and related stuffs
Share this article with your friends who is struggling for these topics.
Callback Promises Asyncawait JavaScript Asynchronous Javascript
https://blog.devgenius.io/promise-vs-callback-vs-async-await-ac30d1801eaa 5/6
09/05/2023, 15:30 Promise Vs Callback Vs Async/Await | by Mohit garg | Dev Genius
Sign up for DevGenius Updates
By Dev Genius
Get the latest news and update from DevGenius publication. Take a look.
Get this newsletter
https://blog.devgenius.io/promise-vs-callback-vs-async-await-ac30d1801eaa 6/6
