Hi everyone 👋 !! Hope you all are doing well. In this blog, I am going to discuss on how to build custom Promise.all() method or polyfill of Promise.all() .

What is Promise.all() method?

Promise.all() is a method that takes an array of promises and returns a single promise that resolves to an array of the results of the input promises.You can refer my blog on Promises.all()

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, "foo");
});

Promise.all([promise1, promise2, promise3])
  .then((values) => {
    console.log(values);
  })
  .catch((error) => console.log(`Error in promises ${error}`));

Polyfill of Promise.all()

Polyfill

Polyfill is a piece of code that implements a feature (usually JavaScript on the Web) on old web browser that do not support the feature. Suppose if an old browser do not support promise.all() .We will implement our own polyfill of promise.all() method.

Step by step Process

• First we will create a function that takes promises or a normal value in the parameter and returns a new promise with resolve and reject as callback .

• Then we iterate through the promises array using forEach() and resolve the promise .

• We will have one variable as completedPromises initialized to 0 to store the number of promises completed and another variable results to store the resulting array of resolved promises.

• At Every iteration completedPromise will increment by one and the result of that particular promise will be stored in the results array variable.

• We will have an if condition to check if my completedPromises count has reached the length of the initial input number of promises i.e if we have resolved the number of input promises given.

• We will promisify our input promise array by wrapping it with promise.resolve() to handle normal values because normal values are not an instance of promise and it will throw an error.

• Lastly we will handle error with .catch because if any of the promises failed the overall promise.all() gets rejected with that error.You can check this CSB

Promise.Myall = (promises) => {
  return new Promise((resolve, reject) => {
    let completedPromises = 0;
    let results = [];
    promises.forEach((value, index) => {
      Promise.resolve(value)
        .then((result) => {
          completedPromises++;
          results[index] = result;
          if (completedPromises === promises.length) {
            resolve("Custom Promise:" + results);
          }
        })
        .catch((error) => {
          reject(error);
        });
    });
  });
};

Testing

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, "foo");
});
Promise.Myall([promise1, promise2, promise3])
  .then((values) => {
    console.log(values);
  })
  .catch(console.error);
//Custom Promise:3,42,foo

This comes to the end of the blog. Hope you folks find it useful. Any suggestions or anything to add I would love to hear it in the comments below.Thank you✨ !!

👉Connect with me: Linkedin Twitter