Heim > Web-Frontend > js-Tutorial > Wie kann ich in JavaScript mehrere asynchrone Vorgänge gleichzeitig ausführen?

Wie kann ich in JavaScript mehrere asynchrone Vorgänge gleichzeitig ausführen?

Patricia Arquette
Freigeben: 2024-12-07 22:41:17
Original
1056 Leute haben es durchsucht

How Can I Run Multiple Async Operations Concurrently in JavaScript?

Gleichzeitige Ausführung mehrerer asynchroner Vorgänge

Problem:

Im folgenden Code wird die Asynchrone Vorgänge werden nacheinander und nicht gleichzeitig ausgeführt:

const value1 = await getValue1Async();
const value2 = await getValue2Async();
Nach dem Login kopieren

Um die Vorgänge auszuführen Gleichzeitig müssen wir den Code ändern.

Lösung:

TL;DR

Verwenden Sie Promise.all statt die sequentielle Erwartung Muster:

const [value1, value2] = await Promise.all([getValue1Async(), getValue2Async()]);
Nach dem Login kopieren

Details:

Die ursprüngliche Lösung führt die beiden Vorgänge parallel aus, wartet jedoch, bis der erste abgeschlossen ist, bevor sie auf den zweiten wartet. Dies kann zu Leistungsproblemen führen, wenn ein Vorgang deutlich länger dauert als der andere.

Promise.all ermöglicht es uns, darauf zu warten, dass mehrere Vorgänge gleichzeitig abgeschlossen werden. Es nimmt ein Array von Versprechen entgegen und gibt ein Versprechen zurück, das in ein Array der Ergebnisse in der gleichen Reihenfolge wie das ursprüngliche Array aufgelöst wird.

Vorteile von Promise.all:

  • Gleichzeitige Ausführung von Vorgängen
  • Behandelt die Ablehnung ordnungsgemäß, wenn eines der Versprechen abgelehnt wird
  • Mehr prägnanter Code

Achtung:

Beachten Sie, dass das Muster „Holen Sie sich das Versprechen und warten Sie dann darauf“ entstehen kann, wenn das zweite Versprechen abgelehnt wird, bevor das erste Versprechen aufgelöst wird in einem „unbehandelten Ablehnungsfehler“. Dies kann durch die Verwendung von Promise.all vermieden werden.

Beispiel:

Hier ist ein überarbeitetes Beispiel mit Promise.all:

const getValue1Async = () => {
  return new Promise(resolve => {
    setTimeout(resolve, 500, "value1");
  });
};

const getValue2Async = () => {
  return new Promise((resolve, reject) => {
    setTimeout(reject, 100, "error");
  });
};

(async () => {
  try {
    console.time("Promise.all");
    const [value1, value2] = await Promise.all([getValue1Async(), getValue2Async()]);
  } catch (e) {
    console.timeEnd("Promise.all", e);
  }
})();
Nach dem Login kopieren

Dieser Code zeigt, wie Promise.all die gleichzeitige Ausführung der beiden asynchronen Vorgänge ermöglicht, was zu einer schnelleren Fertigstellung führt.

Das obige ist der detaillierte Inhalt vonWie kann ich in JavaScript mehrere asynchrone Vorgänge gleichzeitig ausführen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage