Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

JavaScript Asynchronous

JavaScript Promise.all

Written by Published

Promise.all waits for several promises at once instead of one after another.

Awaiting in a loop runs the work one at a time.

When the jobs do not depend on each other, that is wasted waiting.

Example

Example

javascript

const a = Promise.resolve(1);
const b = Promise.resolve(2);

Promise.all([a, b]).then(function (values) {
  console.log(values.join(","));
});

The output is 1,2, in the order the promises were given.

The Four Combinators

all waits for every promise, and rejects if any one fails.

allSettled waits for every promise and never rejects.

race settles with the first to finish, any with the first to succeed.

Syntax

Syntax

javascript

const values = await Promise.all([a, b, c]);

The results come back in the order of the input, not of finishing.

Results Keep Their Order

Even if a later promise finishes first, the array order matches the input.

Example

Example

javascript

function delay(value, ms) {
  return new Promise(function (resolve) {
    setTimeout(function () { resolve(value); }, ms);
  });
}

Promise.all([delay("slow", 30), delay("fast", 5)]).then(function (values) {
  console.log(values.join(","));
});

The output is slow,fast, despite fast finishing first.

One Failure Rejects Them All

all gives up as soon as any promise rejects.

You get the first rejection reason and none of the successful values.

Example

Example

javascript

Promise.all([Promise.resolve(1), Promise.reject(new Error("failed"))])
  .then(function () {
    console.log("never runs");
  })
  .catch(function (error) {
    console.log("caught: " + error.message);
  });

The successful value is lost, which is not always what you want.

allSettled Reports Everything

Every result is described with a status, so nothing is lost.

Use it when partial success is still useful.

Example

Example

javascript

Promise.allSettled([Promise.resolve(1), Promise.reject("nope")])
  .then(function (results) {
    console.log(results.map(function (r) { return r.status; }).join(","));
  });

The output is fulfilled,rejected.

race Takes the First to Settle

This includes a rejection, so the first to fail wins too.

Example

Example

javascript

function delay(value, ms) {
  return new Promise(function (resolve) {
    setTimeout(function () { resolve(value); }, ms);
  });
}

Promise.race([delay("slow", 40), delay("quick", 5)]).then(function (value) {
  console.log(value);
});

A common use is adding a timeout to a slow request.

Parallel or Sequential

Use all when the jobs are independent.

Keep awaiting one at a time when each step needs the last one's result.

Example

Example

javascript

function delay(value) {
  return Promise.resolve(value);
}

async function run() {
  const [a, b] = await Promise.all([delay("one"), delay("two")]);
  console.log(a + " " + b);
}

run();

Destructuring the result array reads very naturally.

Complete Example

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Promise.all</title>
</head>
<body>

  <h1>Promise.all</h1>

  <p id="out">Loading...</p>

  <script>
    function delay(value, ms) {
      return new Promise(function (resolve) {
        setTimeout(function () { resolve(value); }, ms);
      });
    }

    async function load() {
      const out = document.getElementById("out");
      try {
        const [user, posts] = await Promise.all([
          delay("Ada", 800),
          delay(3, 600)
        ]);
        out.textContent = user + " has " + posts + " posts";
      } catch (error) {
        out.textContent = "Failed: " + error.message;
      }
    }

    load();
  </script>

</body>
</html>

Try It Yourself

Run the above example in the Try It Editor.

Try awaiting one at a time:

Replace the Promise.all with two separate awaits and compare how long it takes.

Important Points

  • Promise.all runs promises together and waits for all of them.
  • Results come back in input order.
  • One rejection rejects the whole thing.
  • allSettled reports every outcome and never rejects.
  • race settles with the first to finish, whichever way.

Conclusion

Running independent work in parallel is often the easiest performance win there is.

The choice between all and allSettled is about whether partial results help.

Keep sequential awaits for steps that genuinely depend on each other.

PreviousJavaScript async Error HandlingNextJavaScript Fetch API