loading...
Cover image for 🚀 [GIF] Cheatsheet for Javascript Promise API methods - Promise.all, Promise.allSettled, Promise.race, Promise.any

🚀 [GIF] Cheatsheet for Javascript Promise API methods - Promise.all, Promise.allSettled, Promise.race, Promise.any

hem profile image Hem Updated on ・4 min read

Hello everybody 👋! I created this GIF cheatsheet for my own reference and I hope it will be useful for the community as well ❤️

Index

How is this organized?

Consider the GIFs like watching a slow-mo video of Promise API methods in action. The scenarios for each Promise API describe how they work with an emphasis on Promise status transition, value/reasons, and the order.

Color Code Promise Status What it means
pending pending Represents initial state. The operation represented by the promise is neither fulfilled or rejected.
fulfilled fulfilled Operation is successful and result value is assigned. Typically, values appear on top of the respective promises upon fulfillment
rejected rejected Operation unsuccesful and usually there is a reason for rejection. It appears on top of the rejected promise

For the sake of simplicity, I have added numbers below each promise representing the order in which they settle. This is handy while understanding the short-circuiting behavior (denoted by ⚡️) of each promise API.

Promise.resolve

Scenario 1: If the given value is not a thenable but a valid Javascript value
If the given value is _not_ a `thenable` but a _valid_ Javascript `value`

Scenario 2: If the given value is a thenable (i.e., Promise or object with then() method
If the given value is a `thenable` (i.e., Promise or object with `then()` method

Scenario 3: Nested Promise-like objects
_Nested_ Promise-like objects

Promise.reject

Scenario: Rejection with a reason
Rejection with a `reason`

Promise.all

Scenario 1: All passed-in Promises get fulfilled
Promise.all - All passed-in Promises get fulfilled

Scenario 2: ⚡️ One or more of the passed-in Promise(s) rejects
⚡️Promise.all - One or more of the passed-in Promise(s) rejects

Scenario 3: ⚡️ All passed-in Promises get rejected
⚡️Promise.all - All passed-in Promises get rejected

Scenario 4: Passing an Empty iterable
Promise.all - Passing an Empty iterable

Promise.allSettled

Scenario 1: All passed-in Promises get fulfilled
Promise.allSettled - All passed-in Promises get fulfilled

Scenario 2: One or more of the passed-in Promise(s) rejects
Promise.allSettled - One or more of the passed-in Promise(s) rejects

Scenario 3: All passed-in Promises get rejected
Promise.allSettled - All passed-in Promises get rejected

Scenario 4: Passing an Empty iterable
Promise.allSettled - Passing an Empty iterable

Promise.race

Scenario 1: ⚡️ All passed-in Promises get fulfilled
⚡️Promise.race - All passed-in Promises get fulfilled

Scenario 2: ⚡️ One or more of the passed-in Promise(s) rejects
⚡️Promise.race - One or more of the passed-in Promise(s) rejects

Scenario 3: ⚡️ All passed-in Promises get rejected
⚡️Promise.race - All passed-in Promises get rejected

Scenario 4: Passing an Empty iterable
Promise.race - Passing an Empty iterable

Promise.any

⚠️ Warning - Promise.any() method is experimental and not fully supported by all browsers. It is currently in the TC39 Candidate stage (Stage 3).

Scenario 1: ⚡️ All passed-in Promises get fulfilled
⚡️ Promise.any - All passed-in Promises get fulfilled

Scenario 2: ⚡️ One or more of the passed-in Promise(s) rejects
⚡️ Promise.any - One or more of the passed-in Promise(s) rejects

Scenario 3: All passed-in Promises get rejected
 Promise.any - All passed-in Promises get rejected

Scenario 4: Passing an Empty iterable
Promise.any - Passing an Empty iterable

And hey, I love staying in touch with the curious folks and learning from them as well! ❤️ So, Please feel free to reach out if you have any questions or interesting thoughts 🙋‍♀️🙋‍♂️Don't forget to share this post if you found it useful 🚀


Repo Link :

GitHub logo hemchander23 / javascript_in_gifs

Javascript concepts and features visualised in the form of GIFS. I use it for my own reference. Glad if it was useful for you !

Javascript in GIFs 🎉

Do you find the documentation hard to understand ? Worry no more, the GIFs got you covered!

Contents

  1. Promise API
  2. Nullish Coalescing

Feel free to contribute ❤️




Discussion

pic
Editor guide
Collapse
midasxiv profile image
Midas/XIV

Love the gifs 😁. Good job.

Collapse
hem profile image
Hem Author

Thanks a lot @Midas/XIV ! This motivates me to create more

Collapse
mtbisu profile image
Nguyễn Mạnh Thắng

Anyone can response this one. In promise all. When one of them is rejected. The result will immediately go to catch block or wait to the result of the rest children promises and go to catch block after? Thanks

Collapse
hem profile image
Hem Author

When one of the promises in the input array (or iterable) get rejected, Promise.all rejects as well. Refer the attached snippet.

One thing to note here is that just because Promise.all short-circuited, it doesn't, in any way, affect the execution of other passed-in promises. They just execute independently (See how P3 promise executes independently even though P2 had already rejected and short-circuited Promise.all)

Snippet : Link

Collapse
mtbisu profile image
Nguyễn Mạnh Thắng

Thanks. Your answer helps me a lot indeed :)

Collapse
diegomgar profile image
Dieg Oto

Lovely! Thank you!

Collapse
hem profile image
Hem Author

My Pleasure!

Collapse
saulsilver profile image
Hatem Houssein

Great job at the visualization! 🎉

Collapse
amineamami profile image
amineamami

Well done, i prefer RxJS observables tho