So verwalten Sie mehrere Versprechen gleichzeitig mit Promise.all()

Asynchrone Programmierung in JavaScript ermöglicht die Ausführung ressourcenintensiver Vorgänge im Hintergrund, ohne den Hauptthread zu unterbrechen. Vorgänge wie API-Aufrufe und Dateiprozesse gehören zu den Vorgängen, die asynchron ausgeführt werden sollten.

Versprechen. all() ist eine leistungsstarke Funktion, die diese Vorgänge gleichzeitig verwalten kann. In diesem Artikel erfahren Sie, wie Sie mit Promise.all()

Lass uns eintauchen.

Was ist ein Versprechen?

Ein Versprechen ist ein Objekt, das den eventuellen Misserfolg oder Abschluss eines asynchronen Ereignisses darstellt. Schauen wir uns ein einfaches Versprechen an.

const userId = 1;
let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (userId === 1) {
      resolve({ name: "John Doe", email: "john@example.com" });
    } else {
      reject(new Error("User not found"));
    }
  }, 1000);
});

Ein Versprechen benötigt eine Funktion mit zwei Parametern: auflösen und ablehnen. In unserem Beispiel wird das Versprechen aufgelöst, wenn die Operation erfolgreich ist (d. h. wenn die Benutzer-ID===1 ist. Wenn die Operation fehlschlägt, wird das Versprechen abgelehnt.

Der Lebenszyklus eines Versprechens beginnt im Status „Ausstehend“ und wird schließlich entweder erfüllt oder abgelehnt. Derzeit steht die Zusage noch aus. Um das Versprechen zu nutzen, rufen wir .then() auf, um das Ergebnis zu verarbeiten.

Die Ausgabe erfolgt entweder in Form der Benutzerdaten (falls erfüllt) oder eines Fehlers (falls abgelehnt).

promise
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.log(err);
  });

Da die Operation erfolgreich ist, wird das Versprechen aufgelöst.

const userId = 1;
let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (userId === 1) {
      resolve({ name: "John Doe", email: "john@example.com" });
    } else {
      reject(new Error("User not found"));
    }
  }, 1000);
});

promise
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.log(err);
  });

Wenn wir den Wert von userId ändern, wird das Versprechen abgelehnt und Sie erhalten die Fehlermeldung „Benutzer nicht gefunden“

Angenommen, Sie hätten mehrere Versprechen, würden Sie jedes Versprechen unabhängig voneinander wie folgt behandeln:

const promise1 = new Promise((resolve, reject) => resolve(1));
const promise2 = new Promise((resolve, reject) => resolve(2));
const promise3 = new Promise((resolve, reject) => resolve(3));
promise1
  .then((value) => {
    console.log(value);
    promise2
      .then((value) => {
        console.log(value);
        promise3
          .then((value) => {
            console.log(value);
          })
          .catch((err) => {
            console.log("promise3 error", err);
          });
      })
      .catch((err) => {
        console.log("promise2 error", err);
      });
  })
  .catch((err) => {
    console.log("promise1 error", err);
  });

Es gibt einige potenzielle Probleme, die sich aus der obigen Ausführung ergeben:

• Jedes Versprechen läuft, nachdem das vorherige abgeschlossen ist. Promise2 startet, nachdem Promise1 aufgelöst wurde, und Promise3 startet, nachdem Promise2 aufgelöst wurde. Dies verlangsamt die Ausführung.

• Die verschachtelte Struktur in der .then-Verkettung führt zur „Callback-Hölle“, was das Lesen und Warten des Codes erschwert.

• Jeder Fehler wird unabhängig behandelt, was die Komplexität erhöht.

Ein besserer Ansatz wäre die Verwendung von Promise.all(), das die gleichzeitige Ausführung von Versprechen ermöglicht und so die Leistung und Fehlerbehandlung verbessert

Asynchrone Vorgänge mit Promise.all() verbessern

Promise.all() nimmt eine Iterable von Versprechen und gibt ein einzelnes Versprechen zurück. Die Syntax sieht so aus:

Promise.all(iterable)

Wenn wir Promise.all() in unserem früheren Beispiel verwenden, haben wir so etwas:

Promise.all([promise1, promise2, promise3])
  .then((values) => {
    console.log(values);
  })
  .catch((err) => {
    console.log("promise all error", err);
  });

Wie Sie sehen, ist dieser Ansatz sauberer und leichter zu verstehen.

JavaScript ist eine Single-Threaded-Sprache, was bedeutet, dass jeder Codeabschnitt darauf wartet, dass der vorherige abgeschlossen ist, bevor er zum nächsten übergeht.

Wenn also JavaScript Single-Threaded ist, wie geht Promise.all() mit mehreren Versprechen um?

Promise.all() arbeitet nach dem Parallelitätsprinzip, was bedeutet, dass alle Versprechen nicht unbedingt im selben Moment ausgeführt werden, sondern initiiert werden, ohne auf den Abschluss eines Versprechens zu warten, bevor mit dem nächsten begonnen wird.

Promise.all() wird nur aufgelöst, wenn alle Versprechen im Iterable erfüllt sind. Wenn jedoch eines der Versprechen im Iterable abgelehnt wird, lehnt Promise.all() sofort ab und ignoriert das Ergebnis der verbleibenden Versprechen.

Praxisbeispiele

Promise.all() eignet sich hervorragend für Szenarien, in denen Sie mehrere unabhängige asynchrone Vorgänge ausführen und warten müssen, bis alle abgeschlossen sind, bevor Sie fortfahren.

Sehen wir uns einige dieser Beispiele an, in denen Promise.all() verwendet werden kann, um die Effizienz in realen Anwendungen zu verbessern.

1.Daten von mehreren APIs abrufen

Stellen Sie sich ein Szenario vor, in dem Sie an einer Anwendung arbeiten, die gleichzeitig Daten von zwei verschiedenen APIs abruft.

Versuchen wir, die Daten nacheinander von mehreren APIs abzurufen und auch die Zeit zu protokollieren, die zum Abschließen der Anfrage benötigt wurde.

const userId = 1;
let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (userId === 1) {
      resolve({ name: "John Doe", email: "john@example.com" });
    } else {
      reject(new Error("User not found"));
    }
  }, 1000);
});

Hier ist die Ausgabe:

Die Bearbeitungszeit der Anfrage beträgt 50,36 ms. Diese Ausführungszeit kann verbessert werden. Um die Vorteile der Parallelität zu veranschaulichen, vergleichen wir den Ansatz mit Promise.all()

promise
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.log(err);
  });

Hier verwenden wir Promise.all(), um mehrere asynchrone Vorgänge gleichzeitig auszuführen. Promise.all() nimmt eine Reihe von Versprechen entgegen und gibt ein einzelnes Versprechen zurück, wenn alle Versprechen gelöst wurden.

Hier ist die Ausgabe.

Anhand der Ausgabe können wir erkennen, dass die Verwendung von Promise.all() etwas effizienter ist: Diese Verbesserung tritt auf, weil Promise.all() den gleichzeitigen Start beider Vorgänge ermöglicht, anstatt darauf zu warten, dass einer abgeschlossen ist, bevor der andere gestartet wird.

In realen Anwendungen mit komplexeren Vorgängen oder zusätzlichen API-Aufrufen können die Leistungssteigerungen durch die Verwendung von Promise.all() sogar noch bedeutender sein.

Wenn Sie jedoch warten möchten, bis alle Versprechen erfüllt sind, unabhängig davon, ob sie erfüllt oder abgelehnt werden, können Sie Promise.allSettled() verwenden

1. Senden mehrerer Datenblöcke Angenommen, Sie verfügen über eine Reihe von Textblöcken, die Kundenfeedback oder Bewertungen darstellen, und Sie müssen die Stimmung jedes Textblocks analysieren, indem Sie ihn zur Analyse an eine externe API senden.

In diesem Fall müssen alle Daten gleichzeitig gesendet werden. In diesem Fall können Sie Promise.all() verwenden und alle Anfragen gleichzeitig senden und dann warten, bis alle gelöst sind, bevor Sie die Ergebnisse erhalten.

Angenommen, wir müssten diese Beispieldaten analysieren:

const userId = 1;
let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (userId === 1) {
      resolve({ name: "John Doe", email: "john@example.com" });
    } else {
      reject(new Error("User not found"));
    }
  }, 1000);
});

In diesem Fall müssen alle Daten auf einmal gesendet werden; Das sequentielle Senden von Daten ist zeitaufwändig. Stattdessen verwenden wir Promise.all(), um mehrere API-Aufrufe gleichzeitig zu initiieren.

Sie werden so etwas haben:

promise
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.log(err);
  });

3. Mehrere Dateien gleichzeitig lesen und verarbeiten.

Angenommen, Sie haben eine Anwendung, die Massen-Uploads von Benutzern akzeptiert. Nachdem Sie alle erforderlichen Maßnahmen zur Validierung der Dateien ergriffen haben, können Sie Promise.all() verwenden, um mehrere Dateilesevorgänge parallel durchzuführen. Dies ist weitaus effizienter, als jede Datei einzeln nacheinander zu lesen.

Ohne Promise.all() müssten Sie warten, bis jede Datei vollständig gelesen wurde, bevor Sie die nächste Datei lesen. Dies würde zu einer längeren Bearbeitungszeit führen, insbesondere wenn Sie eine größere Anzahl von Dateien haben.

Mit Promise.all() werden jedoch alle Dateilesevorgänge gleichzeitig initiiert, was zu einer erheblichen Zeitersparnis und einem großartigen Benutzererlebnis führt.

const userId = 1;
let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (userId === 1) {
      resolve({ name: "John Doe", email: "john@example.com" });
    } else {
      reject(new Error("User not found"));
    }
  }, 1000);
});

promise
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.log(err);
  });

Es ist auch wichtig zu beachten, dass Sie beim gleichzeitigen Lesen vieler großer Dateien mögliche Speicheraspekte berücksichtigen sollten.

Zusammenfassung

Zusammenfassend lässt sich sagen, dass Promise.all() viele Vorteile bietet, die im Folgenden zusammengefasst sind

Saubererer Code: Promise.all() macht Ihren Code verständlicher, da Sie keine verschachtelten .then()-Ketten haben. Anfragen werden in einem einzigen .then()-Block verarbeitet.

Effizient: Durch das gleichzeitige Senden von Anforderungen verbessert sich die Gesamtleistung Ihrer Anwendung, da die Gesamtzeit zum Abrufen der Daten reduziert wird.

Verbessern Sie Ihr JavaScript

Erhalten Sie praktische JavaScript-Tipps und Code-Snippets in Ihrem Posteingang. Schließen Sie sich 1000 Entwicklern an, die besseren Code schreiben.

Das obige ist der detaillierte Inhalt vonSo verwalten Sie mehrere Versprechen gleichzeitig mit Promise.all(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!