Verwendung der Methoden Promise.all() und Promise.allSettled() in JavaScript

In diesem Tutorial erfahren Sie, wie Sie Promise Wait in JavaScript verwenden.

In diesem Tutorial werde ich Ihnen Promise.all() 和 Promise.allSettled() Methoden und deren Verwendung für den Umgang mit mehreren Versprechen beibringen.

Verwenden Sie die Promise.all()Methode

Promise 对象具有三个有用的方法，名为 then()、catch() 和 finally(), Sie können sie verwenden, um Rückrufmethoden auszuführen, wenn das Versprechen abgeschlossen ist. p> Die

Promise.all() 方法是一个静态方法，这意味着它属于整个类，而不是绑定到该类的任何特定实例。它接受可迭代的 Promise 作为输入并返回单个 Promise-Methode ist eine statische Methode, was bedeutet, dass sie zur gesamten Klasse gehört und nicht an eine bestimmte Instanz der Klasse gebunden ist. Es akzeptiert eine Iterable von Promises als Eingabe und gibt ein einzelnes Promise-Objekt zurück.

Wie ich bereits erwähnt habe, gibt die Promise.all()-Methode ein neues Versprechen zurück. Wenn alle an diese Methode übergebenen Versprechen erfolgreich aufgelöst wurden, wird dieses neue Versprechen in ein Array bestimmter Versprechenswerte aufgelöst. Sobald eines der verabschiedeten Versprechen abgelehnt wird, wird auch dieses neue Versprechen abgelehnt.

Alle Versprechen werden erfolgreich gelöst

Hier ist ein Beispiel für eine Promise.all() Methode, bei der alle Versprechen erfolgreich gelöst werden:

const promise_a = new Promise((resolve) => {
  setTimeout(() => {
    resolve('Loaded Textures');
  }, 3000);
});

const promise_b = new Promise((resolve) => {
    setTimeout(() => {
      resolve('Loaded Music');
    }, 2000);
});

const promise_c = new Promise((resolve) => {
    setTimeout(() => {
      resolve('Loaded Dialogues');
    }, 4000);
});


const promises = [
  promise_a, promise_b, promise_c
];

console.log('Hello, Promises!');

Promise.all(promises).then((values) => {
  console.log(values);
  console.log('Start the Game!');
});

/* Output

19:32:06 Hello, Promises!
19:32:10 Array(3) [ "Loaded Textures", "Loaded Music", "Loaded Dialogues" ]
19:32:10 Start the Game!

*/

Unser Statement vor dem Aufruf der Promise.all() 方法之前的语句记录于 19:32:06。此外，我们的第三个 Promise 名为 promise_c 需要最长的时间才能解决，并在 4 秒后解决。这意味着调用 all() 方法返回的 Promise 也应该需要 4 秒才能解析。我们可以通过将回调函数传递给 then()-Methode wurde um 19:32:06 Uhr aufgezeichnet. Darüber hinaus dauert die Auflösung unseres dritten Versprechens namens promise_c am längsten, nämlich nach 4 Sekunden. Das bedeutet, dass die Auflösung des Promise, das durch den Aufruf der Methode all() zurückgegeben wird, ebenfalls 4 Sekunden dauern sollte. Wir können überprüfen, ob die Auflösung 4 Sekunden dauert, indem wir die Rückruffunktion an die Methode then() übergeben.

Eine weitere wichtige Sache, die hier zu beachten ist, ist, dass das zurückgegebene Array abgeschlossener Werte die Werte in derselben Reihenfolge enthält, in der wir das Promise an die Promise.all() 方法的顺序相同。名为 promise_b 的 Promise 解析速度最快，只需 2 秒。但是，其解析值仍然位于返回数组中的第二个位置。这与我们将 Promise 传递给 Promise.all()-Methode übergeben haben. Das Versprechen mit dem Namen promise_b lässt sich am schnellsten auflösen und dauert nur 2 Sekunden. Der analysierte Wert befindet sich jedoch immer noch an der zweiten Position im zurückgegebenen Array. Dies entspricht der Stelle, an der wir das Promise an die

-Methode übergeben.

Diese Ordnungshaltung kann in bestimmten Situationen sehr hilfreich sein. Angenommen, Sie verwenden zehn verschiedene Promises, um Wetterinformationen über zehn verschiedene Städte abzurufen. Alle diese Probleme werden nicht gleichzeitig gelöst, und es ist unmöglich, im Voraus zu wissen, in welcher Reihenfolge sie gelöst werden. Wenn Sie jedoch wissen, dass die Daten in der Reihenfolge zurückgegeben werden, in der das Versprechen übergeben wurde, können Sie sie für spätere Vorgänge korrekt zuordnen.

Ein abgelehntes Versprechen

Hier ist ein Beispiel für die Ablehnung eines der Versprechen:

const promise_a = new Promise((resolve) => {
  setTimeout(() => {
    resolve('Loaded Textures');
  }, 3000);
});

const promise_b = new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error('Could Not Load Music'));
    }, 2000);
});

const promise_c = new Promise((resolve) => {
    setTimeout(() => {
      resolve('Loaded Dialogues');
    }, 4000);
});


const promises = [
  promise_a, promise_b, promise_c
];

console.log('Hello, Promises!');

Promise.all(promises).catch((error) => {
  console.error(error.message);
  console.log('Stop the Game!');
});

/* Output

20:03:43 Hello, Promises!
20:03:45 Could Not Load Music
20:03:45 Stop the Game!

*/

all() 方法之前的语句记录于 20:03:43。然而，我们的第二个承诺 promise_b 这次以拒绝告终。我们可以看到 promise_b 在 2 秒后被拒绝。这意味着 all() 方法返回的 Promise 也应该在 2 秒后拒绝，并出现与我们的 promise_bÄhnlicherweise erhalten wir beim Aufruf

den gleichen Fehler. Aus der Ausgabe geht hervor, dass genau das passiert.

awaitMit

Schlüsselwort

verwenden await 关键字用于等待承诺解决，然后再继续下一步。我们还知道 all() 方法返回一个承诺。这意味着我们可以使用 await 以及对 Promise.all()Sie wissen wahrscheinlich bereits, dass das Schlüsselwort

verwendet wird, um auf die Lösung eines Versprechens zu warten, bevor mit dem nächsten Schritt fortgefahren wird. Wir wissen auch, dass die Methode all() ein Versprechen zurückgibt. Das bedeutet, dass wir

zusammen mit Aufrufen der await-Methode verwenden können.

Da create_promise() 的函数，它根据提供的数据和持续时间为我们创建承诺。我们的异步 result_from_promises() 函数使用 await nur innerhalb asynchroner Funktionen und Module gültig ist, müssen wir uns nur daran erinnern, dass wir den Code wie folgt in eine asynchrone Funktion einbinden müssen:

function create_promise(data, duration) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(data);
    }, duration);
  });
}

const promise_a = create_promise("Loaded Textures", 3000);
const promise_b = create_promise("Loaded Music", 2000);
const promise_c = create_promise("Loaded Dialogue", 4000);

const my_promises = [promise_a, promise_b, promise_c];

async function result_from_promises(promises) {
  let loading_status = await Promise.all(promises);
  console.log(loading_status);
}

result_from_promises(my_promises);

/* Outputs

08:50:43 Hello, Promises!
08:50:47 Array(3) [ "Loaded Textures", "Loaded Music", "Loaded Dialogue" ]

*/

Dieses Mal definieren wir eine Funktion namens create_promise(), die basierend auf den bereitgestellten Daten und der angegebenen Dauer ein Versprechen für uns erstellt. Unsere asynchrone Funktion result_from_promises() verwendet das Schlüsselwort Promise.allSettled(), um auf die Auflösung eines Versprechens zu warten.

Verwenden Sie die Promise.all()Methode

Die Verwendung der

-Methode ist sinnvoll, wenn Sie erst fortfahren möchten, nachdem alle Versprechen erfolgreich gelöst wurden. Dies kann beispielsweise nützlich sein, wenn Sie Spielressourcen laden.

Promise.allSettled()Angenommen, Sie erhalten Informationen über das Wetter in verschiedenen Städten. In diesem Fall können Sie Wetterinformationen für alle Städte ausgeben, in denen die Datenerfassung erfolgreich war, und eine Fehlermeldung ausgeben, wenn die Datenerfassung fehlschlägt.

Die 🎜🎜-Methode funktioniert in diesem Fall am besten. Diese Methode wartet darauf, dass alle übergebenen Verpflichtungen durch Auflösung oder Ablehnung gelöst werden. Das von dieser Methode zurückgegebene Promise enthält ein Array von Objekten mit Informationen über das Ergebnis jedes Promise. 🎜

function create_promise(city) {
  let random_number = Math.random();
  
  let duration = Math.floor(Math.random()*5)*1000;

  return new Promise((resolve, reject) => {
    if (random_number < 0.8) {
      setTimeout(() => {
        resolve(`Show weather in ${city}`);
      }, duration);
    } else {
      setTimeout(() => {
        reject(`Data unavailable for ${city}`);
      }, duration);
    }
  });
}

const promise_a = create_promise("Delhi");
const promise_b = create_promise("London");
const promise_c = create_promise("Sydney");

const my_promises = [create_promise("Delhi"), create_promise("London"), create_promise("Sydney"), create_promise("Rome"), create_promise("Las Vegas")];

async function result_from_promises(promises) {
  let loading_status = await Promise.allSettled(promises);
  console.log(loading_status);
}

result_from_promises(my_promises);

/* Outputs

[
  {
    "status": "fulfilled",
    "value": "Show weather in Delhi"
  },
  {
    "status": "fulfilled",
    "value": "Show weather in London"
  },
  {
    "status": "fulfilled",
    "value": "Show weather in Sydney"
  },
  {
    "status": "rejected",
    "reason": "Data unavailable for Rome"
  },
  {
    "status": "fulfilled",
    "value": "Show weather in Las Vegas"
  }
]

*/

如您所见，数组中的每个对象都包含一个 status 属性，让我们知道承诺是否已实现或被拒绝。在履行承诺的情况下，它包含 value 属性中的解析值。在被拒绝的 Promise 的情况下，它在 reason 属性中包含拒绝的原因。

最终想法

我们了解了 Promise 类的两个有用方法，它们可以让您同时处理多个 Promise。当您想要在其中一个 Promise 被拒绝后立即停止等待其他 Promise 解决时， Promise.all() 方法很有用。当您想要等待所有承诺解决时，无论其解决或拒绝状态如何， Promise.allSettled() 方法非常有用。

Das obige ist der detaillierte Inhalt vonVerwendung der Methoden Promise.all() und Promise.allSettled() in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!