Promises in JavaScript | 10 Minute | 2021

promises

In this blog, you will learn the Basic to Pro Level of Promises in Javascript. As we know that javaScript is a single-threaded or synchronous programming language. To achieve the Asynchronous we used the callback functions. For example, suppose we want to fetch some data from Server, we use a callback function to achieve this.

getSomeData((x)=>{
    console.log(x);
    getData(x, (y)=>{
        console.log(y); 
        getMoreData(y, (z)=>{ 
            console.log(z);
        });
    });
});

Now in ES6, Using promises, we can avoid the term ‘callback hell’ and make our code cleaner, easier to read, and easier to understand.

According to MDN, the definition of Promises are,

The Promise the object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.

For the above code snippet, we can write using promises

getSomeData()
  .then((x) => {
    console.log(x);
    return getData(x);
  })
  .then((y) => {
    console.log(y);
    return getMoreData(y);
  })
  .then((z) => {
    console.log(z);
   });

This code is much cleaner and easier to understand than above.

Promises in Javascript

States in Promises

Promises in JavaScript are the same as Promises in real life.  Maybe it is unresolved, resolved, or rejected. Suppose you promise someone to meet in next weekend. It may have 3 states

  1. Pending State: You don’t know, you are available next weekend or not
  2. Resolved State: You’ve got time, and you’re going to meet your friend.
  3. Rejected State: You won’t meet. You break your promise.

So every promise starts with a pending state, then fulfilled, and at the end, it may be rejected.

We will understand promises in 2 parts

  1. Creating promises
  2. Consuming Promises

Creating Promises

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

});

we are using Promise Constructor to create a promise, which takes a single argument as a function, also called an executor function which takes two arguments (resolve & reject ). This resolve and reject are also functions and can take one argument, it can be of any data type.

function playCricketPromise() {
  let userLeft = false
  let userPlaying = false
  return new Promise((resolve, reject) => {
    if (userLeft) {
      reject({
        name: 'User Left', 
        message: 'No one Playing'
      })
    } else if (userPlaying) {
      reject({
        name: 'User playing Cricket',
        message: 'All Rounder' 
      })
    } else {
      resolve('Join us for Playing Cricket')
    }
  })
}

Consuming Promises

playCricketPromise().then(message => {
  console.log(message)
}).catch(error => {
  console.log(error.name + ' ' + error.message)
})

Let’s run the above code in the console.

promises in javascript

Look at the above code and try to understand it. I created a function playCricketPromise, with two variables userLeft and userPlaying. If userLeft is true means, no one is playing or if userPlaying is true means the user can play alone. Maybe he is ALLROUNDER (hahaha…)

If both are false, means they are waiting for other players to join the game and play cricket along.

Promise Chaining

const p1 = new Promise((resolve, reject) => {
  resolve('I go to market');
});
const p2 = new Promise((resolve, reject) => {
  resolve('I will buy some foods');
});
const p3 = new Promise((resolve, reject) => {
  reject('I never came back to my home.');
});
p1
  .then((data) => {
    console.log(data);  
    return p2;
  })
  .then((data) => {
    console.log(data);  
    return p3;
  })
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.log(error);  
  });

Let’s understand what happened above?

Helpers Functions related to promises:

Promise.All

This function accepts an array of promises as input and produces a new promise that either fulfills when all of the promises in the array have been fulfilled or rejects when one of the promises in the array has been rejected.

For Example:

const readBook1 = new Promise((resolve, reject) => {
  resolve('Reading Book1')
})

const readBook2 = new Promise((resolve, reject) => {
  resolve('Reading Book2')
})

const readBook3 = new Promise((resolve, reject) => {
  resolve('Reading Book3')
})

Promise.all([
  readBook1,
  readBook2,
  readBook3
]).then(messages => {
  console.log(messages)
})

Output:

Screenshot 2021 08 15 at 11.59.47 PM

Promise.race

The Promise.race(iterable) the method returns a promise that resolves or rejects as soon as one of the promises in the iterable resolves or rejects, with the value or reason from that promise.

promises in javascript

Summarize:

  1. Use promises whenever you are using async or blocking code.
  2. A promise is an object that returns a value in the future.
  3. A promise starts in the pending state and ends in either a fulfilled state or a rejected state.
  4. resolve maps to then and reject maps to catch
  5. If something needs to be done in both cases use .finally

If you are interested in learning Destructuring, Spread Operator, Rest Operator then Please Visit Javascript Destructuring Topic.

Reference :

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Leave a comment

Your email address will not be published.


*