Earlier before promise was introduced in JS asynchronous operations were handled using callback functions.

Promises are special objects in JS which are used to represent the state of an asynchronous operation.

Promises have three states:

1. Pending: The operation is not completed yet.
2. Fulfilled: The operation is successful.
3. Rejected: The operation is failed.

Creating a Promise

A promise can be created using the Promise constructor.

const promise = new Promise((resolve,reject)=>{
//producing code
})

Promise accepts a callback function as argument this function is called executer function.

This executer function receives two function as arguments which are generally named resolve and reject, the code which goes inside this function is called producing code.

When the executer function has finished it’s job it must call one of the two functions recevied as arguments i.e. resolve or reject, we can call the function resolve or reject with any data type as argument.

👉 The state and result are internal properties of a promise which cannot be accessed directly.

👉 To indicate that job has finished successfully resolve is called with value as it’s argument, this sets the State to fulfilled and sets result to value.

const promise = new Promise((resolve,reject)=>{
resolve(value)
})

👉 To indicate that job has finished with an error reject is called with error as it’s argument, this sets the State to rejected and sets result to error.

The executer function should only call either one of the functions resolve or reject, any further calls to resolve and reject will be ignored.

Promise Consumers

The internal properties state and result can be accessed using promise consumers, promise object act as a bridge or interface between the executer function and consumer functions.

The consuming functions can be registred using .then, .catch, or .finally methods.

1. Then

Then consumer can be linked to a promise by using promise.then(f1,f2).

Then accepsts two calllback functions f1,f2.

👉 f1 function is called when the promise is fulfilled, with the result value as it’s argument.

👉 f2 function is called when the promise is rejected, with the error as it’s argument.

Example:

promise.then(res=>console.log(res),error=>console.log(error))

Then method is chainable that means we can use multiple .then one after the other.

Example:

promise.then(data=> data.JSON()).then(res=> console.log(res))

1. Catch

Catch consumer can be linked to a promise by using promise.catch(f2).

Catch method only accepts one callback function, this method does not add any new functionality, instead of passing second argument to the then method we can use catch method, so when the promise is rejected the callback function f2 of catch will be called with error as it’s argument.

It’s just a better way to handle errors and increase code readability.

promise.then(f1,f2)
promise.then(f1).catch(f2)

Both the statements above are analogus to each other.

1. Finally

Finally consumer method can be linked to a promise by using promise.finally(f1)

Finally accepts a callback function f1 as an argument which is called when a promise gets settled.

👉 A setteled promise just means it has been either fulfilled or rejected.

Finally method is generally used to do cleaup work like stopping loading indicators etc.