Promise.all in JavaScript – mehrere Requests parallel statt nacheinander

Ein häufiger Performance-Fehler: mehrere await untereinander, obwohl die Anfragen gar nicht voneinander abhängen. Dann wartet jede auf die vorige – die Zeiten addieren sich.

Das langsame Muster

const user = await fetch("/api/user").then(r => r.json());     // 200 ms
const posts = await fetch("/api/posts").then(r => r.json());   // + 200 ms
const tags  = await fetch("/api/tags").then(r => r.json());    // + 200 ms
// gesamt ≈ 600 ms

Parallel mit Promise.all

const [user, posts, tags] = await Promise.all([
  fetch("/api/user").then(r => r.json()),
  fetch("/api/posts").then(r => r.json()),
  fetch("/api/tags").then(r => r.json()),
]);
// gesamt ≈ 200 ms – so lange wie der langsamste Request

Alle drei starten sofort, Promise.all wartet, bis alle fertig sind, und gibt die Ergebnisse in derselben Reihenfolge zurück wie die Eingabe. Aus 600 ms werden 200 ms – ohne eine Zeile mehr Logik.

Wichtig: einer scheitert, alle scheitern

Promise.all bricht ab, sobald ein Promise abgelehnt wird – die anderen Ergebnisse gehen dann verloren. Wenn du willst, dass Teilergebnisse ankommen, nimm Promise.allSettled:

const results = await Promise.allSettled([a(), b(), c()]);
results.forEach(r => {
  if (r.status === "fulfilled") console.log(r.value);
  else console.warn("fehlgeschlagen:", r.reason);
});

allSettled wartet immer auf alle und sagt dir pro Eintrag, ob er fulfilled oder rejected war. Ideal, wenn ein einzelner Ausfall die restliche Seite nicht blockieren soll.

Nur echt voneinander abhängige Aufrufe gehören hintereinander – der Rest läuft parallel. So halte ich Ladezeiten kurz. Mehr Snippets auf code.bymw.de.

Quellen

• Promise.all() — MDN
• Promise.allSettled() — MDN