Promise.all()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

Die statische MethodePromise.all() nimmt ein Iterable von Promises als Eingabe und gibt ein einzelnesPromise zurück. Dieses zurückgegebene Promise erfüllt sich, wenn alle Promises der Eingabe erfüllt sind (einschließlich wenn ein leeres Iterable übergeben wird), und gibt ein Array der Erfüllungswerte zurück. Es wird abgelehnt, wenn eines der Promises der Eingabe abgelehnt wird, mit dem Grund der ersten Ablehnung.

Probieren Sie es aus

const promise1 = Promise.resolve(3);const promise2 = 42;const promise3 = new Promise((resolve, reject) => {  setTimeout(resolve, 100, "foo");});Promise.all([promise1, promise2, promise3]).then((values) => {  console.log(values);});// Expected output: Array [3, 42, "foo"]

Syntax

Promise.all(iterable)

Parameter

iterable: Einiterable (wie einArray) von Promises.

Rückgabewert

EinPromise, das:

Bereits erfüllt ist, wenn das übergebeneiterable leer ist.
Asynchron erfüllt wird, wenn alle Promises im gegebeneniterable erfüllt sind. Der Erfüllungswert ist ein Array von Erfüllungswerten in der Reihenfolge der übergebenen Promises, unabhängig von der Reihenfolge der Fertigstellung. Wenn das übergebeneiterable nicht leer ist, aber keine ausstehenden Promises enthält, wird das zurückgegebene Promise dennoch asynchron (anstatt synchron) erfüllt.
Asynchron abgelehnt wird, wenn eines der Promises im gegebeneniterable abgelehnt wird. Der Ablehnungsgrund ist der Ablehnungsgrund des ersten abgelehnte Promises.

Beschreibung

Die MethodePromise.all() ist eine der Methoden derPromise-Konkurrenz. Sie kann nützlich sein, um die Ergebnisse mehrerer Promises zusammenzufassen. Sie wird typischerweise verwendet, wenn es mehrere verwandte asynchrone Aufgaben gibt, auf die sich der gesamte Code verlassen muss, um erfolgreich zu arbeiten — alle müssen erfüllt sein, bevor die Codeausführung fortfährt.

Promise.all() wird sofort abgelehnt, wennirgendeines der Promises der Eingabe abgelehnt wird. Im Vergleich dazu wird das Promise, das vonPromise.allSettled() zurückgegeben wird, auf die Fertigstellung aller Eingabepromises warten, unabhängig davon, ob eines abgelehnt wird oder nicht. Verwenden SieallSettled(), wenn Sie das Endergebnis jedes Promises im Eingabeiterable benötigen.

Beispiele

Verwendung von Promise.all()

Promise.all wartet auf alle Erfüllungen (oder die erste Ablehnung).

const p1 = Promise.resolve(3);const p2 = 1337;const p3 = new Promise((resolve, reject) => {  setTimeout(() => {    resolve("foo");  }, 100);});Promise.all([p1, p2, p3]).then((values) => {  console.log(values); // [3, 1337, "foo"]});

Wenn dasiterable Nicht-Promise-Werte enthält, werden diese ignoriert, aber dennoch im zurückgegebenen Promise-Array-Wert gezählt (wenn das Promise erfüllt wird):

// All values are non-promises, so the returned promise gets fulfilledconst p = Promise.all([1, 2, 3]);// The only input promise is already fulfilled,// so the returned promise gets fulfilledconst p2 = Promise.all([1, 2, 3, Promise.resolve(444)]);// One (and the only) input promise is rejected,// so the returned promise gets rejectedconst p3 = Promise.all([1, 2, 3, Promise.reject(new Error("bad"))]);// Using setTimeout, we can execute code after the queue is emptysetTimeout(() => {  console.log(p);  console.log(p2);  console.log(p3);});// Logs:// Promise { <state>: "fulfilled", <value>: Array[3] }// Promise { <state>: "fulfilled", <value>: Array[4] }// Promise { <state>: "rejected", <reason>: Error: bad }

Destrukturieren des Ergebnisses

Sie werden dasDestrukturieren sehr nützlich finden, wenn Sie eine bekannte Anzahl von Aufgaben zusammenfassen.

// With then()Promise.all([p1, p2, p3]).then(([a, b, c]) => {  console.log(a, b, c); // 3 1337 "foo"});// With awaitconst [a, b, c] = await Promise.all([p1, p2, p3]);

Seien Sie vorsichtig: Wenn die Reihenfolge der ursprünglichen Promises und der Ergebnisvariablen nicht übereinstimmt, können subtile Fehler auftreten.

Asynchronität oder Synchronität von Promise.all

Dieses folgende Beispiel demonstriert die Asynchronität vonPromise.all, wenn ein nicht-leeresiterable übergeben wird:

// Passing an array of promises that are already resolved,// to trigger Promise.all as soon as possibleconst resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)];const p = Promise.all(resolvedPromisesArray);// Immediately logging the value of pconsole.log(p);// Using setTimeout, we can execute code after the queue is emptysetTimeout(() => {  console.log("the queue is now empty");  console.log(p);});// Logs, in order:// Promise { <state>: "pending" }// the queue is now empty// Promise { <state>: "fulfilled", <value>: Array[2] }

Dasselbe passiert, wennPromise.all abgelehnt wird:

const mixedPromisesArray = [  Promise.resolve(33),  Promise.reject(new Error("bad")),];const p = Promise.all(mixedPromisesArray);console.log(p);setTimeout(() => {  console.log("the queue is now empty");  console.log(p);});// Logs:// Promise { <state>: "pending" }// the queue is now empty// Promise { <state>: "rejected", <reason>: Error: bad }

Promise.all wird synchron aufgelöst, wenn und nur wenn das übergebeneiterable leer ist:

const p = Promise.all([]); // Will be immediately resolvedconst p2 = Promise.all([1337, "hi"]); // Non-promise values are ignored, but the evaluation is done asynchronouslyconsole.log(p);console.log(p2);setTimeout(() => {  console.log("the queue is now empty");  console.log(p2);});// Logs:// Promise { <state>: "fulfilled", <value>: Array[0] }// Promise { <state>: "pending" }// the queue is now empty// Promise { <state>: "fulfilled", <value>: Array[2] }

Verwendung von Promise.all() mit asynchronen Funktionen

Innerhalb vonasynchronen Funktionen ist es sehr verbreitet, Ihren Code "übermäßig zu warten". Zum Beispiel, gegeben die folgenden Funktionen:

function promptForDishChoice() {  return new Promise((resolve, reject) => {    const dialog = document.createElement("dialog");    dialog.innerHTML = `<form method="dialog">  <p>What would you like to eat?</p>  <select>    <option value="pizza">Pizza</option>    <option value="pasta">Pasta</option>    <option value="salad">Salad</option>  </select>  <menu>    <li><button value="cancel">Cancel</button></li>    <li><button type="submit" value="ok">OK</button></li>  </menu></form>    `;    dialog.addEventListener("close", () => {      if (dialog.returnValue === "ok") {        resolve(dialog.querySelector("select").value);      } else {        reject(new Error("User cancelled dialog"));      }    });    document.body.appendChild(dialog);    dialog.showModal();  });}async function fetchPrices() {  const response = await fetch("/prices");  return await response.json();}

Sie könnten eine Funktion so schreiben:

async function getPrice() {  const choice = await promptForDishChoice();  const prices = await fetchPrices();  return prices[choice];}

Beachten Sie jedoch, dass die Ausführung vonpromptForDishChoice undfetchPrices nicht voneinander abhängt. Während der Benutzer sein Gericht auswählt, ist es in Ordnung, die Preise im Hintergrund abzurufen, aber im obigen Code sorgt derawait-Operator dafür, dass die asynchrone Funktion pausiert, bis die Auswahl getroffen wurde, und dann erneut, bis die Preise abgerufen sind. Wir könnenPromise.all verwenden, um sie gleichzeitig auszuführen, damit der Benutzer nicht darauf warten muss, dass die Preise abgerufen werden, bevor das Ergebnis gegeben ist:

async function getPrice() {  const [choice, prices] = await Promise.all([    promptForDishChoice(),    fetchPrices(),  ]);  return prices[choice];}

Promise.all ist hier die beste Wahl derKonkurrenzmethode, da die Fehlerbehandlung intuitiv ist — wenn eines der Promises abgelehnt wird, ist das Ergebnis nicht mehr verfügbar, sodass der gesamteawait-Ausdruck eine Ausnahme auslöst.

Promise.all akzeptiert ein Iterable von Promises, also müssen Sie, wenn Sie es verwenden, um mehrere asynchrone Funktionen gleichzeitig auszuführen, die asynchronen Funktionen aufrufen und die zurückgegebenen Promises verwenden. Das direkte Übergeben der Funktionen anPromise.all funktioniert nicht, da sie keine Promises sind.

async function getPrice() {  const [choice, prices] = await Promise.all([    promptForDishChoice,    fetchPrices,  ]);  // `choice` and `prices` are still the original async functions;  // Promise.all() does nothing to non-promises}

Schnell-Ablehnungs-Verhalten von Promise.all

Promise.all wird abgelehnt, wenn eines der Elemente abgelehnt wird. Wenn Sie zum Beispiel vier Promises übergeben, die sich nach einer Zeitüberschreitung auflösen, und ein Promise, das sofort abgelehnt wird, wirdPromise.all sofort abgelehnt.

const p1 = new Promise((resolve, reject) => {  setTimeout(() => resolve("one"), 1000);});const p2 = new Promise((resolve, reject) => {  setTimeout(() => resolve("two"), 2000);});const p3 = new Promise((resolve, reject) => {  setTimeout(() => resolve("three"), 3000);});const p4 = new Promise((resolve, reject) => {  setTimeout(() => resolve("four"), 4000);});const p5 = new Promise((resolve, reject) => {  reject(new Error("reject"));});// Using .catch:Promise.all([p1, p2, p3, p4, p5])  .then((values) => {    console.log(values);  })  .catch((error) => {    console.error(error.message);  });// Logs:// "reject"

Es ist möglich, dieses Verhalten zu ändern, indem mögliche Ablehnungen behandelt werden:

const p1 = new Promise((resolve, reject) => {  setTimeout(() => resolve("p1_delayed_resolution"), 1000);});const p2 = new Promise((resolve, reject) => {  reject(new Error("p2_immediate_rejection"));});Promise.all([p1.catch((error) => error), p2.catch((error) => error)]).then(  (values) => {    console.log(values[0]); // "p1_delayed_resolution"    console.error(values[1]); // "Error: p2_immediate_rejection"  },);

Spezifikationen

Specification
ECMAScript® 2026 Language Specification # sec-promise.all

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen •Fehler mit dieser Übersetzung melden

Movatterモバイル変換

Promise.all()

Help improve MDN