Advanced JavaScript: A Deep Dive into the Core Concepts

What is Promise.all in JavaScript?

Board Infinity
Board Infinity
What is Promise.all in JavaScript?

    Javascript vs Typescript: What is the Difference?

    Understanding Array Slice() in JavaScript

    JavaScript: Array Filter() Method

    JavaScript array map() method

    Encoding and Decoding URL in JavaScript: How?

    JavaScript Fetch API Explanation

    A quick guide to Debounce in JavaScript

    Promise in JavaScript

    What is Promise.all in JavaScript?

    Javascript Async and Await Function

    A quick guide to async/await in Javascript

    10 Best JavaScript Frameworks to Use in 2023

    Trends and Tools of JavaScript in 2022

    JavaScript Interview Questions and Answers (2023)

Introduction

An iterable of promises is sent into the Promise.all() function, which produces a single Promise that resolves to an array of the promises' outcomes. When every promise in the input has been completed or if there are no promises in the input iterable, the promise that was returned will be fulfilled. Upon any of the input promises being rejected or upon a non-promise throwing an error, it rejects right away and will reject with this first rejection message/error.

Syntax

promise.all(iterable)

Parameters:

  • Iterable - an item with iterations, such as an array.

Return value:

If the iterable passed is empty, a Promise has already been fulfilled.

If the iterable supplied has no promises, then an asynchronously fulfilled Promise will be returned. Notably, Google Chrome 58 in this instance returns a promise that has already been met.

In all other instances, a pending Promise. When every promise in the returned iterable has been fulfilled or rejected, or if any of the promises reject, this returned promise is then fulfilled or rejected asynchronously (as soon as the queue is empty). Please refer to the example below regarding "Asynchronicity or synchronicity of Promise.all." Regardless of the complete order, returned values will be in the order of the Promises supplied.

Description

This technique may be helpful for combining the outcomes of many promises. It is often utilized when there are several interconnected asynchronous activities that must all be completed before the code execution can move on in order for the entire program to function correctly.

If any of the supplied promises are rejected, Promise.all() will instantly return false. In contrast, regardless of whether any of the input promises are rejected, the promise delivered by Promise.allSettled() will wait for all of them to finish. The end result of each promise and function from the input iterable will thus always be returned.

When this procedure is finished, the promise array's order is maintained.

Examples

Using Promise.all:

Promise.all waits for all fulfillments (or the first rejection).

const p1 = Promise.resolve(3);

const p2 = 1337;

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

  setTimeout(() => {

    resolve("foo");

  }, 100);

});


Promise.all([p1, p2, p3]).then((values) => {

  console.log(values); // [3, 1337, "foo"]

});

Non-promise values will be disregarded if they are included in the iterable, but they will still be included in the value of the returned promise array (if the promise is kept):

// this will be counted as if the iterable passed is empty, so it gets fulfilled

const p = Promise.all([1, 2, 3]);

// this will be counted as if the iterable passed contains only the resolved promise with value "444", so it gets fulfilled

const p2 = Promise.all([1, 2, 3, Promise.resolve(444)]);

// this will be counted as if the iterable passed contains only the rejected promise with value "555", so it gets rejected

const p3 = Promise.all([1, 2, 3, Promise.reject(555)]);


// using setTimeout we can execute code after the queue is empty

setTimeout(() => {

  console.log(p);

  console.log(p2);

  console.log(p3);

});


// logs

// Promise { <state>: "fulfilled", <value>: Array[3] }

// Promise { <state>: "fulfilled", <value>: Array[4] }

// Promise { <state>: "rejected", <reason>: 555 }

Promise.all - synchronicity or asynchronicity:

The following illustration shows how Promise.all may be asynchronous (or synchronic, if the iterable provided is empty):

// we are passing as argument an array of promises that are already resolved,

// to trigger Promise.all as soon as possible

const resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)];


const p = Promise.all(resolvedPromisesArray);

// immediately logging the value of p

console.log(p);


// using setTimeout we can execute code after the queue is empty

setTimeout(() => {

  console.log('the queue is now empty');

  console.log(p);

});


// logs, in order:

// Promise { <state>: "pending" }

// the queue is now empty

// Promise { <state>: "fulfilled", <value>: Array[2] }

However, the provided iterable must be empty for Promise.all to resolve synchronously:

const p = Promise.all([]); // will be immediately resolved

const p2 = Promise.all([1337, "hi"]); // non-promise values will be ignored, but the evaluation will be done asynchronously

console.log(p);

console.log(p2)

setTimeout(() => {

  console.log('the queue is now empty');

  console.log(p2);

});


// logs

// Promise { <state>: "fulfilled", <value>: Array[0] }

// Promise { <state>: "pending" }

// the queue is now empty

// Promise { <state>: "fulfilled", <value>: Array[2] }

Promise.all fail-fast behavior:

If any of the parts are refused, Promise.all is also rejected. For instance, Promise.all will reject right away if you feed it five promises that resolve after a timeout and one promise that rejects right away.

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

  setTimeout(() => resolve('one'), 1000);

});

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

  setTimeout(() => resolve('two'), 2000);

});

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

  setTimeout(() => resolve('three'), 3000);

});

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

  setTimeout(() => resolve('four'), 4000);

});

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

  reject(new Error('reject'));

});


// Using .catch:

Promise.all([p1, p2, p3, p4, p5])

  .then((values) => {

    console.log(values);

  })

  .catch((error) => {

    console.error(error.message)

  });


// From console:

// "reject"

write your code here: Coding Playground

This habit can be altered by how you respond to potential rejections:

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

  setTimeout(() => resolve('p1_delayed_resolution'), 1000);

});


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

  reject(new Error('p2_immediate_rejection'));

});


Promise.all([

  p1.catch((error) => error),

  p2.catch((error) => error),

]).then((values) => {

  console.log(values[0]); // "p1_delayed_resolution"

  console.error(values[1]); // "Error: p2_immediate_rejection"

})

write your code here: Coding Playground

Hope this gave you a clear understanding of the concept.