![Cover image for 🚀 [GIF] Cheatsheet for Javascript Promise API methods - Promise.all, Promise.allSettled, Promise.race, Promise.any](https://res.cloudinary.com/practicaldev/image/fetch/s--1MtHPcmL--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/3bauhrfpqexzl59aszn1.png)
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?
- Promise.resolve,Promise.reject
- Promise.all
- Promise.allSettled
- Promise.race
- Promise.any
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 |
Represents initial state. The operation represented by the promise is neither fulfilled or rejected. |
 |
fulfilled |
Operation is successful and result value is assigned. Typically, values appear on top of the respective promises upon fulfillment |
 |
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
Scenario 2: If the given value is a thenable (i.e., Promise or object with then() method
Scenario 3: Nested Promise-like objects
Promise.reject
Scenario: Rejection with a reason
Promise.all
Scenario 1: All passed-in Promises get fulfilled
Scenario 2: ⚡️ One or more of the passed-in Promise(s) rejects
Scenario 3: ⚡️ All passed-in Promises get rejected
Scenario 4: Passing an Empty iterable
Promise.allSettled
Scenario 1: All passed-in Promises get fulfilled
Scenario 2: One or more of the passed-in Promise(s) rejects
Scenario 3: All passed-in Promises get rejected
Scenario 4: Passing an Empty iterable
Promise.race
Scenario 1: ⚡️ All passed-in Promises get fulfilled
Scenario 2: ⚡️ One or more of the passed-in Promise(s) rejects
Scenario 3: ⚡️ All passed-in Promises get rejected
Scenario 4: 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
Scenario 2: ⚡️ One or more of the passed-in Promise(s) rejects
Scenario 3: All passed-in Promises get rejected
Scenario 4: 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 :
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
Feel free to contribute
Top comments (12)
Love the gifs 😁. Good job.
Thanks a lot @Midas/XIV ! This motivates me to create more
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
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
Thanks. Your answer helps me a lot indeed :)
Well done, i prefer RxJS observables tho
Lovely! Thank you!
My Pleasure!
Great job at the visualization! 🎉
i love this article thank you.
Amazing！
Awesome! Amazing! Thank you so much!