Promises in JavaScript

Anil Kumar

Aug 24, 2020·7 min read

📄 Table of Contents

• What are Promises
• Why to use Promises
• What are callbacks
• example of callback (setTimeout)
• how to create a Promise (syntax)
• promise.any, promise.all, promise.allSettled, promise.race
• HTTP Interceptors
• References

▬▬▬▬▬▬▬▬▬▬▬▬▬ ✦ ✦ ✦ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Brief Introduction to Promises

Promises allow you to attach callback handlers to handle the future asynchronous success value or failure reason.

• Promises are often used to handle asynchronous tasks in JavaScript.
• Before promises were introduced natively in JavaScript, we used a lot of callbacks for asynchronous tasks.
• Promises executes code in order and must finish executing code before running the next one.
• Promises provide catch mechanism, which callbacks do not have.
• A promise will only return a value once, which means that if a promise returns an error, it will only return it once.
• A lot of developers might still think that callbacks and promises are the same, but in fact, they are not.

Promises resemble callbacks in some ways, but with an easier to follow syntax and a better understanding of the code.

Sometimes we might hear that a promise is settled. That means that this promise is either fulfilled or rejected, settled is not a state but it’s used just for convenience.

Chaining

Promise chaining is one of the things that makes promises so great and easy to use. We can execute a chain of asynchronous tasks, each task will be executed as soon as the previous task was completed.

Promises are a cleaner way to run asynchronous tasks. Promises provide catch mechanism, which callbacks do not have. Promises allow cleaner, better, and functional code.

Before diving deep into promises let’s understand what exactly is a callback.

◉ What is a Callback?

A callback is a function that is passed into another function as an argument to be executed later.

They’re so common in JavaScript that you probably used callbacks yourself without knowing they’re called callbacks. Here, is an example of setTimeout() function callback:

In the example above, setTimeout() waits for three seconds and is called after something happened (after 3 seconds passed for this example), but not before.

Callback Hell

Now let’s imagine a scenario where you want to wait another 3 seconds after the first callback has finished, and do something. Your code will look like the following:

And now if you want to do something after the second callback has finished, you will get another nested callback:

Nested callbacks make it difficult to maintain and scale the code. In the code above, we have three levels of nested functions, one for each setTimeout() call. Having an application with tens of nested callbacks will make the developers live hell to update or even understand the code. Such a situation is referred to as callback hell.

That’s where the JavaScript promises come into the picture.

◉ 3 states of Promises

Promises are NOT meant to replace the callbacks. Instead, they simplify the chaining of functions, making it easier to read and maintain the code.

A promise can be in one of the following states:

Three States of Promise

Pending → Before the result is ready, a promise is in a pending state.

Fulfilled → If the result is available it becomes fulfilled

Rejected → If an error occurs, the promise is rejected.

If a promise is not pending i.e it is either fulfilled or rejected, we say it has been settled which means it cannot change its state. That means a promise which has settled remains in that state forever.Once settled, a promise can not be re-settled.

◉ Creating a Promise

To create a promise in JavaScript, you use the Promise constructor:

const myPromise = new Promise();

It takes two parameters, one for success (resolve) and one for fail (reject):

const myPromise = new Promise((resolve, reject) => {  
    // condition
});

Inside the Promise, you manually call the resolve() function if the promise is completed successfully and invoke the reject() function in case an error occurs.

let completed = true;
const myPromise = new Promise((resolve, reject) => {  
    if(completed) {    
        resolve('Promise is resolved successfully.');  
    } else {    
        reject('Promise is rejected');  
    }
});

After executing the above promise in the browser console you will see that the promise is resolved because the completed variable is set to true

To see the pending state of the promise, we wrap the code of the Promise in the setTimeout() function:

let completed = true;
const myPromise = new Promise((resolve, reject) => {  
   setTimeout(() => { 
     if(completed) {    
        resolve('Promise is resolved successfully.');  
     } else {    
        reject('Promise is rejected');  
     }
   }, 3000)
});

Now, you see that the promise starts with the pending state with the value is undefined. The promise value will be returned later once the promise is completed.

After about 3 seconds, type myPromise in the console window, you will see that the state of the promise becomes resolved and the promise value is the string that we passed to the resolve() function.

If you change the value of the completed variable to false and run the promise again you will see an error message and the state of the promise becomes rejected after 3 seconds:

Consuming a Promise: then, catch, finally

1) The .then() method

The then() method is used to schedule a callback to be executed when the promise is successfully resolved.

For example, let’s log the message to the console that we got from the Promise:

2) The catch() method

If you want to schedule a callback to be executed when the promise is rejected, you can use the catch() method of the Promise object:

So if the promise gets rejected, it will jump to the catch() method and this time we will see a different message on the console.

3) The finally() method

Sometimes, you want to execute any piece of code whether the promise is fulfilled or rejected.

The finally() method is called once the promise is settled irrespective of whether it is resolved or rejected.

◉ promise.race, any, all, allSettled

The native Promise object has some extra stuff you might be interested in:

Promise.any

The Promise.any method takes an array of Promises and will return as soon as the first one is Fulfilled.

Promise.race()

Promise.race() method accepts a list of promises and returns a promise that fulfills or rejects as soon as there is one promise that fulfills or rejects, with the value or reason from that promise.

This is very similar to the Promise.any method, however, it has one key difference. While Promise.any will return only if one of the promises is Fulfilled, Promise.race will return if any of the promises are Settled.

Promise.all()

Promise.all() method is useful to execute multiple promises in parallel and waits until all of them are ready. It takes an array of promises as an input and returns a single promise, that resolves when all of the promises get resolved or any one of them gets rejected.

Promise.allSettled()

Promise.allSettled() method wait’s until all promises have settled (each may resolve or reject). Returns a promise that resolves after all of the given promises have either resolved or rejected, with an array of objects that each describe the outcome of each promise.

Summary

• A promise is an object that returns a value in the future.
• A promise starts in the pending state and ends in either a fulfilled state or a rejected state.
• Use then() method to schedule a callback to be executed when the promise is fulfilled, and catch() method to schedule a callback to be invoked when the promise is rejected.
• Place the code that you want to execute in the finally() method whether the promise is fulfilled or rejected.

HTTP Interceptors

This section has less to do with promises but is a handy axios feature. HTTP interceptors come in handy when you need to examine or change HTTP requests from your application to the server or vice versa (e.g., logging, authentication, etc.)

The interceptors run before you make HTTP request via axios.

References:

for very easy understanding refer to

https://levelup.gitconnected.com/understanding-javascript-promises-5040a634c474