Understanding Promises

No! I am not gonna write a philosophical blog on Promises and how I am never gonna give you up.

Haha! rickrolled you. But on a serious note, when I started learning Promises in Javascript, it took me quite a while to wrap around the concept. This blog is a way to document my learning about Promises

We always hear about Javascript being called a single-threaded non-blocking asynchronous concurrent language. Promises are one such way we can understand the asynchronous nature of Javascript

So, what is a Promise?

When we try to perform, asynchronous calls in our program, a Promise which is an Object handles such operations. Promises provide us with ways to handle the response to an asynchronous call based on the outcome of the call.

Promises have 3 states

1. fulfilled: this is used to handle when the async call is successful
2. rejected: this is used to handle when the async call fails
3. pending: it is the initial state, neither the call is fulfilled nor rejected.

A pending promise can either be fulfilled or rejected.

Consider a real-life scenario. You want to wash your clothes. And to do that you put your clothes in the washing machine and continue with your other work. The washing machine doing the cleaning is the promise.

If the clothes are done washing, it signals by you with its sound that it's complete. This resembles the promise fulfilled state.

And if due to some reason, the washing machine breaks stops due to power cut, it indicates with another signal saying that it has stopped. This resembles the promise rejected state.

Syntax for Promises

const promise = new Promise((resolve, reject)=> {
//  this is where you write code for handling the async call request 

})

Here, the Promise() constructor takes in two parameters resolve and reject. Whenever we perform any operation inside the Promise, if the operation gets successful, we send the response using the resolve method and with the reject method otherwise.

Example

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

    const number = Math.floor(Math.random() * 5);

     if ( number%2 === 0) {
      const successMessage = "Promise resolved";
      resolve(successMessage , number);
    } else {
      const failureMessage = "Promise rejected";
      reject(failureMessage, number);
    }
  });

The above snippet makes a random number. If the random number is even, the promise gets resolved else it gets rejected

Suppose we make a call to the above Promise. When the response returns, based on the type of response we get, we handle it. This is where .then() and .catch() methods come into action.

When the promise is resolved, the .then() method gets called with the value that was passed into the resolve() method as its parameter.

If the promise is rejected, the .catch() method gets called with the value that was passed into the rejected() method as its parameter.

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

    const number = Math.floor(Math.random() * 5);

    if ( number%2 === 0) {
      const successMessage = "Promise resolved";
      resolve(successMessage , number);
    } else {
      const failureMessage = "Promise rejected";
      reject(failureMessage, number);
    }
  });

promise
    .then((successMessage) => console.log(successMessage, number))
    .catch((failureMessage) => console.log(failureMessage, number));

Conclusion

Promises in Javascript give us a huge advantage, especially when we are making async calls over a network. The idea that the program can still run without having to stop for the Promise is a huge superpower in real-world programming.

Hope this blog helped. Do drop your feedback and share it with your friends if you find it useful.

I write blogs documenting the things I learn and the insights I get from them.

You can follow me on Twitter and LinkedIn