JavaScript Promises Explained Simply

JavaScript Promises Explained Simply


A Promise is a placeholder for a value that may not be known when the promise is created. It lets you attach handlers to an asynchronous action's eventual success or failure. This allows asynchronous methods to return values like synchronous methods: instead of returning the final value right away, the asynchronous method returns a promise to provide the value later.

Didn't get it?

Let me explain with an example.

const promiseHandler = function(resolve, reject) {
   global.setTimeout(() => {
       resolve('foo'); // resolved the promise after 3 seconds
   }, 3000)

const p = new Promise(promiseHandler); // a promise named 'p' is created

p.then((result) => {
    console.log('promise fulfilled', result); // printing on resolve
}).catch((error) => {
    console.log('promise rejected', error); // catching error on reject

// output: promise fulfilled foo

In the code snippet above, we created a promise object called p using the Promise constructor. The constructor takes a function named promiseHandler as an argument. This function receives two parameters, resolve and reject, which are functions provided by JavaScript to handle the promise's resolution and rejection. The promise object p returns a value based on whether the promise is resolved or rejected.

The main static methods of Promise

  1. Promise.all()

  2. Promise.any()

  3. Promise.allSettled()

  4. Promise.race()

All the static methods take an array or iterable of promises and return a single promise. Refer to the table below to understand the fulfillment and rejection conditions.

Static MethodFulfilledRejected
Promise.all()It fulfills when all the iterable promises are fulfilled, returning an array of fulfillment values.It rejects when any of the input promises reject, with the first rejection reason.
Promise.any()It fulfills when any of the iterable promises are fulfilled, returning the first fulfillment value.It rejects when all of the input promises are rejected, returning an AggregateError containing an array of rejection reasons.
Promise.allSettled()This promise resolves when all the input promises in the array have settled, meaning they have either been fulfilled or rejected.It is never rejected.
Promise.race()It fulfills as soon as the first promise from the input array is fulfilled. This means that if any of the promises given to Promise.race() is fulfilled before any of the other promises are rejected, the race promise will fulfill with the same value as the first fulfilled promise.The Promise.race() function will reject if the first promise from the input array that settles does so by rejecting. This means that if any of the promises provided to Promise.race() reject before any of the other promises fulfill, the race promise will reject with the same reason as the first rejected promise.

In conclusion, Promises are a powerful tool in JavaScript for managing asynchronous operations. They offer a cleaner and more structured way to handle asynchronous code compared to traditional callback methods. Promises represent a future value or the eventual completion (or failure) of an asynchronous operation, helping developers write code that is easier to understand, reason about, and maintain. In upcoming articles, we will discuss these static methods in detail.