The method in Javascript is a function that accepts many promises and then does something only after they have all been settled. From all the promises you enter into it, it creates a new promise which then waits for each promise to finish, before continuing. That ultimately means you can wait for multiple things to finish before you fire something else. Promise.all() This method is particularly useful for development - for example, if you want a loading symbol to show on the screen until multiple promises conclude, then provides an easy way to do that. Let's look at how it works. UI Promise.all() The Javascript Promise.all() method accepts an iterable of promises. All that means is it can accept anything that could be iterated over - like an array. You can't put objects or single promises in it. Promise.all() Let's look at a simple example that utilises timeouts: let myPromise = () => { return new Promise((resolve) => { setTimeout(function() { resolve('firstPromise') }, 500) }) } let mySecondPromise = () => { return new Promise((resolve) => { setTimeout(function() { resolve('secondPromise') }, 800) }) } Here we have two timeouts, the longest of which takes 800ms. We want the console log the values of each after both are finished. The easiest way to do this is with : Promise.all() Promise.all([ myPromise(), mySecondPromise() ]).then((data) => { console.log(data) // Console logs [ 'firstPromise', 'secondPromise' ] }) As you can see, is tenable, and the data returned is an array of the result from each promise. So, since we passed in , we get the data of each in an array, in the same order. Promise.all() myPromise, mySecondPromise While it might be tempting to use like so: await let myPromiseFinish = await myPromise() let mySecondPromiseFinish = await mySecondPromise() console.log([ myPromiseFinish, mySecondPromiseFinish ]) This is actually . causes both functions to run one after another. That means that by using , the total time taken to finish both promises will be . less efficient await await 1300ms lets you run both promises concurrently, meaning that the total operation can take around - this is quite useful to know if you are looking to optimize your code. Promise.all() 800ms Expanding promise results using Promise.all() Since will return an array of results, and also creates a new promise, we can use with , and capture its output like so: Promise.all() await Promise.all() let [ myPromiseResult, mySecondPromiseResult ] = await Promise.all([ myPromise(), mySecondPromise() ]) Now both of the results of our promises are available once finishes processing both. Pretty cool, right? Promise.all() Promise Rejection It's important to note that if your promise fires instead of , will immediately too. If you are unfamiliar with promise rejections, then that’s the best time to use the function instead of the function. reject resolve Promise.all() reject reject resolve Below, the promise will always reject and throw an error : Uncaught firstPromise let myPromise = () => { return new Promise((resolve, reject) => { setTimeout(function() { reject('firstPromise') }, 500) }) } So, if a promise in your set rejects, be sure to anticipate that will also reject. Promise.all() Promise.all() Conclusion is a really useful way to simplify your code, and also speed it up in some instances - by letting you do promises concurrently. If you're new to Javascript, learning about how promises and async functions work in Javascript is tricky, so I wrote another guide on that - . Promise.all() you can learn more about promises here Also published here.
