Promise.all: Examples and Use Cases in JavaScript

Promise.all: Examples and Use Cases in JavaScript

Promise.all runs promises in parallel and waits for all to fulfill. Here are practical examples.

Fetch Multiple Resources

const [user, posts, comments] = await Promise.all([
  fetchUser(id),
  fetchPosts(),
  fetchComments(),
]);

Fetch Multiple Pages

const pages = await Promise.all(
  [1, 2, 3, 4, 5].map((page) => fetch(`/api?page=${page}`).then((r) => r.json()))
);
``
### Parallel Data Transformation

```js
const [processedA, processedB] = await Promise.all([
  processA(data),
  processB(data),
]);
``
### Timeout with Promise.race

```js
function withTimeout(promise, ms) {
  const timeout = new Promise((_, reject) =>
    setTimeout(() => reject(new Error("timeout")), ms)
  );
  return Promise.race([promise, timeout]);
}
const result = await withTimeout(fetch("/api"), 5000);
``
### Fast Fail

```js
// if any fetch fails, the whole thing fails immediately
try {
  const [a, b, c] = await Promise.all([fetchA(), fetchB(), fetchC()]);
} catch (err) {
  console.error("One of the fetches failed:", err);
}
``
### Empty Array

```js
const results = await Promise.all([]); // [] (resolves immediately)
``
### Non-Promise Values

```js
const [a, b, c] = await Promise.all([1, Promise.resolve(2), 3]);
// [1, 2, 3] (non-promises are passed through)
``
### The Takeaway

`Promise.all` is for parallel independent operations. Use cases: fetching multiple resources, fetching multiple pages, parallel data transformation, and fast-fail scenarios. Empty arrays resolve immediately. Non-promise values are passed through. Results are in order.