AppDividend
Latest Code Tutorials

Javascript Promise All Example | Promise.all() Tutorial

0 114

Get real time updates directly on you device, subscribe now.

Javascript Promise All Example | Promise.all() Tutorial is today’s topic.  If you are not familiar with Javascript Promise, then check out my this Javascript Promise Example tutorial. Promise.all() method returns a single Promise that resolves when all of the promises passed as an iterable have resolved or when the iterable contains no promises. Promise.all() method can be useful for aggregating the results of multiple promises.

Javascript Promise All Example

If any of the passed-in promises reject, the Promise.all() method asynchronously rejects with the value of the promise that rejected, whether or not the other promises have resolved. The syntax for Promise.all() method is following.

Promise.all(iterable);

An iterable parameter is an object such as an Array or String.

Let us take a simple example. Let us create one file called app.js and write the following code.

// app.js

const p1 = Promise.resolve(21);
const p2 = 110470116021;
const p3 = new Promise((resolve, reject) => { // eslint-disable-line no-unused-vars
	setTimeout(() => {
		resolve('AppDividend');
	}, 1000);
});

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

Here, we have defined the three promises. Then we have defined Promise.all() method to return a single promise based on three promises. In this example, all of the three promises resolves so, the Promise.all() function resolves and gives the output of all three promises in the form of an array.

The output is following. I am using Node.js to run the file by typing node app.

 

Javascript Promise All Example | Promise.all() Tutorial

Promise.all() rejects scenario

Let us take a scenario, where one of the above promises fails to resolve.

// app.js

const p1 = Promise.resolve(21);
const p2 = new Promise((resolve, reject) => { // eslint-disable-line no-unused-vars
	setTimeout(() => {
		reject(new Error('rejection'));
	}, 1000);
});
const p3 = new Promise((resolve, reject) => { // eslint-disable-line no-unused-vars
	setTimeout(() => {
		resolve('AppDividend');
	}, 1000);
});

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

In the above example, the second promise is rejected that is why the final output will be throwing an error.

 

Promise.all() rejects scenario

The Promise.all()  is rejected if any of the elements are rejected. For example, if you pass in four promises that resolve after a timeout and one promise that rejects immediately, then Promise.all() will reject immediately.

See, we get the error like this because we have rejected one promise and final promise will also be rejected.

It is possible to change this behavior by handling possible rejections.

// app.js

const p1 = Promise.resolve(21);
const p2 = new Promise((resolve, reject) => { // eslint-disable-line no-unused-vars
	setTimeout(() => {
		reject(new Error('rejection'));
	}, 1000);
});
const p3 = new Promise((resolve, reject) => { // eslint-disable-line no-unused-vars
	setTimeout(() => {
		resolve('AppDividend');
	}, 1000);
});

Promise.all([
	p1.catch(error => { return error; }),
	p2.catch(error => { return error; }),
	p3.catch(error => { return error; }),
]).then(values => {
	console.log(values[0]);
	console.log(values[1]);
	console.log(values[2]);
});

In the above example, we are catching those error inside the Promise.all() block, if any promises reject with an error and then displaying the values of each promise. The output is following.

 

Javascript Promise All Example

Finally, Javascript Promise All Example | Promise.all() Tutorial is over.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.