Working with Promise.all and Promise.race in JavaScript

Promise.all

Promise.all combines multiple promises into a single promise that resolves when all of the input promises resolve, or rejects as soon as any one of them rejects.

When all promises succeed, the resolved value is an array containing results in the same order as the input promises—regardlless of completion timing. If any promise fails, Promise.all immediately rejects with the reason from the first rejected promise.

const taskA = Promise.resolve('Task A done');
const taskB = Promise.resolve('Task B done');
const taskC = Promise.reject('Task C failed');

Promise.all([taskA, taskB])
  .then(results => console.log(results)) // ['Task A done', 'Task B done']
  .catch(err => console.error(err));

Promise.all([taskA, taskC, taskB])
  .then(results => console.log(results))
  .catch(err => console.error(err)); // 'Task C failed'

This behavior is useful when coordinating multiple asynchronous operations—such as concurrent API calls—where the UI should only update once all data is available.

const delay = ms => new Promise(resolve => setTimeout(() => resolve(`${ms}ms delay complete`), ms));

const slow = delay(3000);
const fast = delay(2000);

Promise.all([slow, fast])
  .then(results => console.log(results)); // ['3000ms delay complete', '2000ms delay complete']

Note that even though fast resolves before slow, their positions in the result array match their original order in the input array.

Promise.race

Promise.race returns a promise that settles as soon as any of the input promises settles—whether fulfilled or rejected. The outcome reflects the first settled promise.

const winner = new Promise(resolve => setTimeout(() => resolve('Resolved!'), 1000));
const loser = new Promise((_, reject) => setTimeout(() => reject('Rejected!'), 500));

Promise.race([winner, loser])
  .then(value => console.log(value))
  .catch(reason => console.error(reason)); // 'Rejected!'

Because loser rejects after 500ms—faster than winner's 1000ms resolution—it determines the outcome of Promise.race. This makes Promise.race suitable for scenarios like implementing timeouts or selecting the fastest response among redundant requests.

Tags: javascript Promises Async/Await web development

Posted on Tue, 23 Jun 2026 17:25:18 +0000 by rockofaith