JavaScript Promises

#javascript

What is a Promise?

A Promise is an object in JavaScript used to handle asynchronous operations. They can handle multiple asynchronous operation and provide better error handling.

A Promise is always in one of the three states.
pending - This is the initial state, we do not know if it is fulfilled or rejected.
fulfilled - This indicated that the operation has completed successfully
rejected - This indicates that the operation has failed

Why Promises ?

Promises help us deal with asynchronous code in a far more simpler way compared to callbacks.
Callback hell can be avoided with Promises.

Callback hell is resulted when a lot of code is written and executed from top to bottom without any asynchronous functions.

How to work with promises

Creating Promises

const promise = new Promise()

How to check if the promise is in pending, fulfilled or rejected state?

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

})

Promise constructor takes only one argument. That is a callback function.
Callback function takes two arguments, resolve and reject
resolve and reject functions are typically called after an async operation

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

    //when the promise got fulfilled
    resolve()
})

resolve is a function which is called when the state changes from pending to fulfilled.

const promise = new Promise((resolve, reject) => {
    //when the promise got rejected
    reject()
})

reject is a function which is called when the state changes from pending to rejected.

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

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

promise.then()
promise.catch()

const onFulfillment = () => {
  console.log("Promise is fulfilled")
}
const onRejected = () => {
  console.log("Promise is not fulfilled")
}

The onFulfillment and onRejected are used as callback functions in promise.
Callback functions are functions that are passed in to another function as arguments

The Promise method gives us the access to two functions. They are then() and catch()

We call these functions as
promise.then()
promise.catch()

If the promise status is changed from pending to fulfilled, then() is invoked.
If the promise status is changed from pending to rejected, catch() is invoked.

promise.then(onFulfillment)
promise.catch(onRejected)

Promise Chaining

fetch(url)
.then(process)
.then(output)
.catch(handleErrors)
}

The process() function will wait for the fetch() to complete and the output() will wait untill the process() is completed.

If the fecth(), process() and output() promises are rejected, handleErrors() is called.

Conclusion

There is no guarantee of exactly when the operation will complete and the result will be returned, but there is a guarantee that when the result is available, or the promise fails, you can execute the code based on the result or handle the error if the promise is rejected.