Platform under construction

Async JavaScript

Advanced

Promise Composition

Promise composition lets you coordinate multiple async operations: all, allSettled, race and any.

const [profile, settings] = await Promise.all([
  loadProfile(),
  loadSettings()
]);

Async JavaScript

Choose the composition method that matches the failure model.

Promise.all waits for all promises to fulfill, but rejects as soon as one rejects. Use it when every result is required.

Promise.allSettled waits for every promise and gives each outcome. Use it when partial success is useful.

Promise.race and Promise.any are specialized tools for first result patterns, timeouts and fallback strategies.

Promise.all

All must fulfill, or the whole operation rejects.

Promise.allSettled

Waits for all outcomes.

Promise.race

Settles with the first promise to settle.

Promise.any

Fulfills with the first fulfillment.

Examples

Async code should show state, handle failure and avoid stale results.

Use allSettled when partial results are valuable

const results = await Promise.allSettled(tasks);
const fulfilled = results.filter(result => result.status === "fulfilled");

Using all when partial success should still render

const widgets = await Promise.all(widgetRequests);

// One failure prevents every widget from rendering.

Code patterns

Reusable examples for quick reference.

These examples are the async patterns you will reuse: timers, promises, composition, await, fetch and cancellation.

All required

Fail fast if any required task fails.

const results = await Promise.all([loadA(), loadB()]);

Partial success

Keep successful results even when some fail.

const results = await Promise.allSettled([loadA(), loadB()]);

Timeout race

Race work against a timeout promise.

const result = await Promise.race([loadData(), timeout(3000)]);

First success

Use any for fallback sources.

const data = await Promise.any([fromCache(), fromNetwork()]);

Rules that matter

Make time visible in your code.

Async JavaScript is easier when every operation has clear pending, success, failure and cancellation behavior.

Use all for required groups

Every promise must succeed.

Use allSettled for dashboards

Partial content can still be useful.

Use race for timeouts carefully

The losing operation may still continue unless cancelled.

Use any for fallback success

It ignores rejections until all reject.

Handle aggregate errors

Promise.any can reject with AggregateError.

Preserve result order

all and allSettled keep the input order, not completion order.

Production thinking

Reliable async code is what makes modern interfaces feel fast instead of fragile.

Why does this matter?

Async applications rarely load one thing. Composition is how you coordinate many things without chaos.

Accessibility

Partial loading should communicate which sections succeeded and which failed.

Production note

Production code should choose composition based on product behavior, not habit.

SEO note

If page sections load independently, failures should not leave the whole page empty.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Replace allSettled with all and observe the failure.
Display fulfilled values and rejection messages.
Add a timeout with Promise.race.

Practice assignment

Do this before moving to the next topic.

Run multiple promises together.
Choose all or allSettled.
Render outcomes clearly.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Promise Composition.