Promises in JS and its functions

While learning JavaScript everyone comes across this topic of "Promises", as a beginner it can be difficult to understand promises
I will try my best to make you understand about promises, just stay with me on this journey till the end.

Promises in JS are just like promises in real life, for example if some one has promised you something that they will perform some action upon your request then there is some probability that they will perform that and there is some probability that they will not perform that action.

Promises in JS are also similar. They have 3 states:

1. Pending
2. Rejected
3. Resolved a.k.a Fulfilled

Now, let's understand about these 3 states:

1. Pending: It is initial state of the promise when you don't know whether an action will be done or not 🤔.

2. Rejected: It is state after pending when it confirmed that the action is not performed or cannot be performed 🙁.

3. Resolved: It is state after pending when it confirmed that the action is performed 😎.

Promises are performed asynchronously but JS is a synchronous language, if didn't know about it before I would suggest you to read about this (Read about: Call stack, Web APIs, event loop, microtask queue).

Promise Chaining
Promise chaining is a way of executing two or more aysnc tasks which are related to previous output received

Code Example:

fetch(myRequest)
.then((response) => {
if (!response.ok) {
throw new Error(HTTP error! Status: ${ response.status });
}
return response.blob();
})
.then((response) => {
myImage.src = URL.createObjectURL(response);
})

In the above example you can see there are 2 then() method being used here the last then() is working on previous then() response

There are a few methods by which you can perform some actions from any output. Some of the methods are:

• then()
• catch()
• finally()
• all()
• allsettled()
• any()
• race()
• reject()
• resolve()

1. then(): This method is used in promise chaining. It takes 2 callbacks as arguments first is for resolve and second one is for reject. If immediate action on rejection is not needed then we can omit second callback and instead of second callback catch() can be used.

2. catch(): This method is for handling rejections occurred in a promise. It is similar to then() but the only difference is that it does not accept any callback for resolve. It only accepts callback for rejection

3. finally(): This method works when a promise is rejected or resolved. For this method it does not matter whether a promise is rejected or resolved this will run when a promise is settled( a state when a promise is rejected or resolved )

4. all(): This method works on any iterable of promises(for example an array). It method resolves when all of the promises given are resolved. It rejects when any of the promises is rejected. In case of rejection it will give error related to the first promise that got rejected and will not check further.

5. allsettled(): This method also works on iterable promises. this method waits for all the promises for being resolved or rejected, it checks every promise for the same. It is appropriate to use when all of the promises in the iterable is independent of each other but if there are dependent on each other all() method would be appropriate.

6. any(): This method also works on iterable promises. It returns a single promise that resolves as soon as any of the promises is resolved. if no promises is resolved then AggregateError(group of errors) is thrown

7. race(): This method also works on iterable promises. It returns a promise as soon as a any of the promise is rejected or resolved whereas any() would check all the promises for rejection.

8. reject(): It returns a new promise that is rejected with a given reason

9. resolve(): It returns a promise that is resolved with a given value

Comments

[Puneet]

Nice and concise.