Promise.all for parallel independent work

Understanding Promise.all for parallel independent work

Promise.all is an aggregator, not a scheduler. By the time you hand it an array, every operation in that array is already running, because a promise is a handle on work that has started: calling getUser() fires the request whether or not anyone is awaiting the result. What Promise.all adds is a single promise to await and a single results array whose entries sit at the same index as the promise that produced them, so you can destructure [user, stats] without tracking who finished first.

That indexing is also why elapsed time collapses to the slowest member instead of the sum. A sequential 'await a(); await b();' does not merely wait twice, it delays starting b until a has settled, because the second call is a statement placed after a suspension point. Timers and network requests are serviced outside the JS thread, so many can be outstanding at once, and Promise.all lets you wait for all of them in one place instead of inventing an artificial dependency between them.

The price is all-or-nothing settlement. The aggregate rejects the instant the first member rejects, carrying that member's reason and no results array, and it does not cancel the others, because promises have no cancel operation: their timers keep ticking and their side effects still land. Whatever the successful members produced is discarded, and a later rejection is swallowed since only the first reason is reported, which makes Promise.all the right tool only when a partial result is worthless to you.

const delay = (ms, value) =>
  new Promise(resolve => setTimeout(() => resolve(value), ms));

async function loadDashboard() {
  const start = Date.now();

  // Calling delay() starts each timer right here; nothing is awaited yet.
  const userP = delay(300, 'user:ada');
  const statsP = delay(200, 'stats:42');
  const feedP = delay(100, 'feed:3-items');

  // One await for three in-flight operations; results arrive by position.
  const [user, stats, feed] = await Promise.all([userP, statsP, feedP]);

  console.log(user, stats, feed);
  console.log('elapsed:', Math.floor((Date.now() - start) / 100) * 100 + 'ms (slowest task, not the sum)');
}

loadDashboard();

Worked examples

const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
const job = n => delay(100).then(() => n * 2);

async function serial() {
  const out = [];
  for (const n of [1, 2, 3]) {
    out.push(await job(n));
  }
  return out;
}

async function parallel() {
  return Promise.all([1, 2, 3].map(n => job(n)));
}

(async () => {
  let t = Date.now();
  const a = await serial();
  console.log('serial:', a.join(','), 'elapsed >= 300ms?', Date.now() - t >= 300);

  t = Date.now();
  const b = await parallel();
  console.log('parallel:', b.join(','), 'elapsed < 200ms?', Date.now() - t < 200);
})();

const delay = (ms, value) => new Promise(resolve => setTimeout(() => resolve(value), ms));
const failAfter = ms =>
  new Promise((_, reject) => setTimeout(() => reject(new Error('boom')), ms));

const slow = delay(300, 'slow value').then(value => {
  console.log('the 300ms task still finished:', value);
  return value;
});

Promise.all([failAfter(100), slow])
  .then(results => console.log('not reached', results))
  .catch(err => console.log('Promise.all rejected at ~100ms:', err.message));

const getUser = async () => 'ada';
const getStats = async () => 42;

(async () => {
  const wrong = await Promise.all([getUser, getStats]);
  console.log('wrong:', typeof wrong[0], typeof wrong[1]);

  const right = await Promise.all([getUser(), getStats()]);
  console.log('right:', right[0], right[1]);
})();

Important notes

Common mistakes

Try it yourself