Skip to content

promise_api

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

promise_api

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
README.md
README.md
 
 

README.md

Promise API

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

Hope this was useful! Please feel free to share your thoughts on the same. Don't forget to share if you found this useful.

Auf wiedersehen 🙌🏼