What are Javascript Promises?

Javascript Promises

A Promise is a proxy for a value that has not been computed yet. It allows a process to run side-by-side or asynchronously on the premise that upon completion, would return an immutable value or an error.

At any given point in time, a promise can be in one of three states:

· Pending: initial state, neither resolved nor rejected

· Resolved or Fulfilled: process has been completed successfully

· Rejected: process has failed and returned an error

A pending Promise can be resolved with a value or rejected with an error. With ES6, a new Promise can be created using the following syntax:

new Promise((resolve,reject) => {…})

The above-mentioned method takes one argument in the form of a function with two predefined parameters resolve and reject that can be used to resolve a
pending promise or reject a pending promise respectively.

Example:

Handlers can be chained to the Promise using the Promise.prototype.then(), Promise.prototype.catch() and Promise.prototype.finally() methods.

Promise.prototype.then()

.then() is invoked when a promise is fulfilled or rejected. It takes 2 functions as arguments. One to handle resolved promise state and the other to handle rejected promise state(optional).

Promise(….).then(handleResolved, handleRejected)

Representation of .then() method

Example:-

Promise.prototype.catch()

.catch() method deals with rejected states only. It is a shorthand for
.then(NULL,errorHandler) as it internally calls .then(NULL, errorHandler) method.

.catch((error) => {…})

Representation of .catch() method

Example:

Promise.prototype.finally()

.finally() method is executed when the Promise is settled, .i.e. fulfilled or rejected. This provides a way to execute code once the Promise has been dealt with.

.finally(() => {...})

Example:

Chaining Promises

Promise.prototype.then(), Promise.prototype.catch() and Promise.prototype.finally() return a new promise allowing multiple handlers to be chained to a promise.

Example:

Code snippet 1

Let’s take a closer look at what’s happening here. The Promise p can settle into 1 of 2 states — resolved or rejected.

Case 1: p settles into a resolved state

In this case, the message “I am greater than half” is passed to the first .then() method. Since the promise has been resolved, the first argument to the .then() method is called with the parameter resolved to be the initial message itself.

Any value returned from .then() is interpreted to be the product of a resolved promise, meaning that the value returned from the first argument of the first .then() method will be passed to the first argument of the second .then() function.

Finally, the .finally() method would be called since .catch() cannot handle resolved state and therefore would be effectively skipped.

Output:

inside first .then() method --- I am greater than half
inside second .then() method --- This has been resolved
Execution has been completed

Case 2: p settles into a rejected state

In this case, the message “I am less than half” is passed to the first .then() method. Since the promise has been rejected, the second argument to the .then() method is called with the parameter rejected being the initial message itself.

Any value returned from .then() is interpreted to be the product of a resolved promise, meaning that the value returned from the second argument of the first .then() method will be passed to the first argument of the .then() method

Finally, the .finally() method would be called.

Output:

inside first .then() method and rejected ---I am less than half
inside second .then() method --- This has been rejected
Execution has been completed

Case 3: Let’s slightly modify the example

As you can see from line 11, a new error is being thrown by the resolve function in the first .then() method. Hence, when p settles into a resolved state, a new error is thrown which can only be handled by the .catch() method.

.finally() is called at the end and the execution ends.

Output:

inside first .then() method --- I am greater than half
Inside .catch() method --- Error: This is an error
Execution has been completed

Applications of Javascript Promises

With JavaScript Promises you can manage multiple asynchronous operations easily, whereas callbacks can create callback hell leading to unmanageable code. Moreover, promises give you an incredibly powerful way to handle asynchronous operations.

If you wish to go through the whole code do follow the below given GitHub Repo link:

GitHub - MrVSiK/Javascript-Promises