在 Promise.all() 中附加 .then() 的 Promise

Question

I am confused about the resolution of promises. If I created an array of promises and supplied a .then() to all of them as shown below..

// assume async() returns a promise that resolves with the number 5. 
promiseArray = [];
for (let i = 0; i < 5; i++){
promiseArray.push(async(5).then(() => console.log("done")));
}
Promise.all(promiseArray).then(() => console.log("all done"));

I am confused about what is happening here. Do the promises start console logging "done" even before Promise.all() completes? Is the .then() for the Promise.all() a separate .then() that will run only once all the promises resolve?

What is the difference in removing the .then() from all the individual promises and instead executing this code in the .then() of the Promise.all() as shown below? Is there any performance trade off?

// assume async() returns a promise that resolves with the number 5. 
promiseArray = [];
for (let i = 0; i < 5; i++){
promiseArray.push(async(5));
}
Promise.all(promiseArray).then((resolves) => resolves.forEach(console.log("done")));

Answer 1

Do the promises start console logging "done" even before Promise.all() completes? Is the .then() for the Promise.all() a separate .then() that will run only once all the promises resolve?

That's right. The Promises that get pushed to the array all resolve after their done is logged, so then calling Promise.all on the array of Promises will result in all done always being logged after every done has logged.

What is the difference in removing the .then() from all the individual promises and instead executing this code in the .then() of the Promise.all() as shown below? Is there any performance trade off?

The main difference is that in the first approach, the done s can be logged as soon as their prior Promise finished . In contrast, in the second approach:

Promise.all(promiseArray).then((resolves) => resolves.forEach(

Above, all Promises must resolve before starting to iterate over them again.

This could well be a significant factor. For example, let's say you have to perform a CPU-intensive calculation for every Promise result. In such a case, taking the second approach would definitely be the better choice, because then you can be carrying out some of those calculations while waiting for other Promises to resolve, rather than having to wait for all Promises to resolve before starting the first calculation.

Here's an example where using the second approach is a solid improvement over the first approach. When calculations are expensive, chain them onto the individual Promises , rather than after a Promise.all .

(If the code to be run after individual Promises isn't expensive, then it doesn't matter - you can choose whichever approach you find most readable)