Promise.all rejects on one failure: keep partial results with allSettled

The orders request succeeds. The recommendations request fails. A shared Promise.all rejects, and your error branch replaces both sections with a full-screen failure.

When sections can load independently, collect each result with Promise.allSettled. It waits for every promise and returns a status for each one. Results stay in input order, even when requests finish in a different order. MDN explains the result shape.

Keep the successful result

This runnable example uses local fixtures so you can inspect the failure path without a server:

async function loadDashboard() {
  const [orders, recommendations] = await Promise.allSettled([
    Promise.resolve([{ id: 'order-42', status: 'shipped' }]),
    Promise.reject(new Error('Recommendations unavailable')),
  ]);

  return {
    orders: orders.status === 'fulfilled'
      ? { data: orders.value, error: null }
      : { data: null, error: orders.reason },
    recommendations: recommendations.status === 'fulfilled'
      ? { data: recommendations.value, error: null }
      : { data: null, error: recommendations.reason },
  };
}

const dashboard = await loadDashboard();
console.log(dashboard.orders.data[0].id);
console.log(dashboard.recommendations.error.message);

Expected output:

order-42
Recommendations unavailable

Render the orders data and a retry control in the recommendations section. Keep failure distinct from an empty successful result; otherwise the UI may tell someone they have no orders when the request actually failed.

Replace the fixtures with your real request functions. If those use fetch, ensure they reject on unsuccessful HTTP status codes, as shown in the HTTP error tip.

Watch the slowest request

allSettled still waits for every request. It cannot progressively render the first result or stop a request that never finishes. Use separate loading states when each section should appear immediately, and configure request cancellation or timeouts where appropriate.

Keep Promise.all for work where you need every result before continuing, such as assembling one record from required dependencies.

Documentation checked October 3, 2026. Run this example as an ES module in a runtime with Promise.allSettled and top-level await support.