Master JavaScript Promises and Async_Await Easily
Master JavaScript Promises and Async_Await Easily
hell
Shivendra Dwivedi
@shivendra-dwivedi
Promise:
It is a javaScript object which represents the eventual
completion or failure of an asynchronous call or
operation.
Initially the result of the Promise is undefined when
asynchronous operation starts.
Syntax: executer function
Example:
e)
alu
e(v
olv
res
rej
ec
t(e
rro
r)
@Shivendra Dwivedi
Why/When to Use a promise:
Use it when you have an operation that completes in
the future—either successfully or with an error.
It helps to avoid callback hell and makes async code
cleaner.
Example:
callback
callback
callback
Solution:
returning a
promise
handling the
promise
@Shivendra Dwivedi
Consumers .then(), .catch():
.then()
Used to handle the successful result of a Promise.
Can also take a second argument to handle errors
(though .catch() is preferred).
Returns a new Promise, so it's chainable.
@Shivendra Dwivedi
Cleaning up with finally():
Runs after a Promise is settled (either resolved or
rejected).
Used for cleanup tasks like hiding loaders, closing
database connections, etc.
Doesn’t receive the Promise result.
Promise Chaining:
A technique where we connect multiple .then() calls,
so the output of one becomes the input for the next.
Use it when you want to run tasks one after another,
and each depends on the previous one.
Example: User login → fetch profile → show
dashboard.
@Shivendra Dwivedi
chaining .then()
calls
Quick Promises:
Promise.resolve():
Returns a promise that is already resolved with the
given value. Use it to mock success or return resolved
value.
Promise.reject():
Returns a promise that is already rejected with the
given error. Use it to mock failure or simulate errors.
@Shivendra Dwivedi
calling .resolve()
calling .reject()
handling resolved promise
@Shivendra Dwivedi
All resolve
rejects in 1 second
@Shivendra Dwivedi
no catch block
@Shivendra Dwivedi
Promise.any([P1, P2, P3, ...])
Waits only for the first promise to resolve . Returns
the result by the 1st resolved promise or “All promises
were rejected” if all given promises reject.
Use When: You only care about first success (e.g.,
querying backup APIs).
@Shivendra Dwivedi
Async : A keyword used to declare an asynchronous
function that always returns a Promise.
Example:
Execution pauses
till promise
resolves/rejects.
@Shivendra Dwivedi
Why/ When to use async/await
There are two major reasons :
Messy chaining with multiple .then() → leads to
"Promise Hell".
No pause in flow — next lines execute before the
async task finishes.
More logic = more
.then() chaos
easier error
handling
@Shivendra Dwivedi
Error handling in async/await
Use try...catch to handle errors. Wrap the awaited code
in the try block, use catch to handle errors, and finally
for cleanup tasks that run regardless of success or
failure.
error-prone code
cleaning things up
@Shivendra Dwivedi
Resolving Multiple Promises in the Same
Async Function
Code above await runs synchronously.
At each await, JS checks if the Promise is resolved:
If not: function suspends, browser continues.
Once resolved: function resumes from where it
paused.
This pause-resume cycle happens for each awaited
promise.
If the same promise is awaited again, JS won’t
suspend , it immediately resumes since the promise
is already resolved.
@Shivendra Dwivedi
logs immediately
Output:
@Shivendra Dwivedi
“await” outside async function
Yes, but only at top-level of ES modules in modern
environments (ES2022+ / Node.js). This is called Top-
Level Await — allows await without wrapping in async
function
Module
at top level
@Shivendra Dwivedi
throws an error
@Shivendra Dwivedi
Was this helpful?
Comment