Tutorial: Implementieren von Polyfills Promise.allSettled von Grund auf in JavaScript

JavaScript führte Promise.allSettled in ES2020 ein, um die Arbeit mit mehreren asynchronen Vorgängen zu erleichtern. Im Gegensatz zu Promise.all, das kurzschließt, wenn ein Versprechen abgelehnt wird, stellt Promise.allSettled sicher, dass Sie Ergebnisse aus allen Versprechen erhalten, unabhängig davon, ob sie erfolgreich sind oder nicht.

In diesem Tutorial begleite ich Sie durch die Erstellung Ihrer eigenen Implementierung von Promise.allSettled und konzentriere mich dabei darauf, sie von Grund auf neu zu erstellen. Wir werden auch untersuchen, wie Versprechen hinter den Kulissen funktionieren, und Ihnen dabei helfen, das asynchrone Verhalten zu verstehen, das JavaScript so leistungsstark macht.

Was ist Promise.allSettled?

Bevor wir mit dem Schreiben von Code beginnen, wollen wir aufschlüsseln, was Promise.allSettled tut:

• Eingabe: Eine Reihe von Versprechen.
• Ausgabe: Ein Versprechen, das aufgelöst wird, nachdem alle Eingabeversprechen erfüllt (entweder erfüllt oder abgelehnt) wurden, mit einer Reihe von Objekten, die das Ergebnis jedes Versprechens beschreiben.

Jedes Objekt im Array enthält:

• Status: „erfüllt“ oder „abgelehnt“.
• Wert: Der Wert, wenn das Versprechen gelöst wurde, oder der Grund, wenn es abgelehnt wurde. Beispiel:

const promises = [
  Promise.resolve('Success'),
  Promise.reject('Failure'),
  Promise.resolve('Complete')
];

Promise.allSettled(promises).then(results => {
  console.log(results);
});

Ausgabe:

[
  { status: 'fulfilled', value: 'Success' },
  { status: 'rejected', reason: 'Failure' },
  { status: 'fulfilled', value: 'Complete' }
]

Diese Methode ist ideal, wenn Sie warten müssen, bis alle Versprechen erfüllt sind, unabhängig davon, ob sie erfolgreich sind oder nicht.

Warum Promise.allSettled selbst implementieren?

Auch wenn diese Funktion mittlerweile in modernen Browsern verfügbar ist, bietet die Implementierung selbst ein tieferes Verständnis dafür, wie JavaScript-Versprechen funktionieren. Darüber hinaus gewährleistet es die Kompatibilität mit älteren Umgebungen, die ES2020-Funktionen nicht nativ unterstützen.

Schritt-für-Schritt-Anleitung zur Implementierung von Promise.allSettled

Wir werden eine Funktion namens allSettled erstellen, die das Verhalten von Promise.allSettled nachahmt. Lassen Sie uns dies Schritt für Schritt erstellen:

Schritt 1: Erstellen Sie eine Wrapper-Funktion

Die Funktion akzeptiert eine Reihe von Versprechen und gibt ein neues Versprechen zurück. Dieses neue Versprechen wird aufgelöst, wenn alle Eingabezusagen erfüllt sind (entweder gelöst oder abgelehnt).

function allSettled(promises) {
  // This will return a new promise that resolves when all promises settle
  return new Promise((resolve) => {
    // Implementation goes here
  });
}

Schritt 2: Behandeln Sie jedes Versprechen

Für jedes Versprechen im Array müssen wir verfolgen, ob es aufgelöst oder abgelehnt wird. Wir verpacken jedes Versprechen mit .then() und .catch(), um seinen Status zu erfassen:

function allSettled(promises) {
  return new Promise((resolve) => {
    let results = [];
    let count = 0;

    promises.forEach((promise, index) => {
      // Wrap the promise with a .then() and .catch() to capture the result
      promise
        .then((value) => {
          results[index] = { status: 'fulfilled', value };
        })
        .catch((reason) => {
          results[index] = { status: 'rejected', reason };
        })
        .finally(() => {
          count++;
          // Once all promises have settled, resolve the outer promise
          if (count === promises.length) {
            resolve(results);
          }
        });
    });
  });
}

Erläuterung:

1. Das äußere Versprechen erschaffen:

Die allSettled-Funktion gibt ein neues Promise zurück. Dieses Versprechen wird aufgelöst, wenn alle Eingabeversprechen erfüllt sind.

2. Versprechen durchgehen:

Wir durchlaufen das Promise-Array mit .forEach. Für jedes Versprechen verfolgen wir das Ergebnis mit .then() (für gelöste Versprechen) und .catch() (für abgelehnte Versprechen).

3. Aufzeichnungsergebnisse:

Das Ergebnis jedes Versprechens wird im Ergebnisarray gespeichert. Wenn das Versprechen aufgelöst wird, enthält das Objekt { Status: 'erfüllt', Wert }. Wenn es ablehnt, speichert es { Status: 'abgelehnt', Grund }.

4. Zählung erfüllter Versprechen:

Wir verwenden eine Zählvariable, um zu verfolgen, wie viele Versprechen erfüllt wurden. Jedes Mal, wenn ein Versprechen endet (entweder durch .then() oder .catch()), erhöhen wir die Anzahl. Sobald count der Länge des Eingabearrays entspricht, lösen wir das äußere Versprechen mit dem Ergebnisarray auf.

Schritt 3: Testen unserer allSettled-Funktion

Jetzt testen wir diese benutzerdefinierte Implementierung:

const promises = [
  Promise.resolve('Success'),
  Promise.reject('Failure'),
  Promise.resolve('Complete')
];

Promise.allSettled(promises).then(results => {
  console.log(results);
});

Ausgabe:

[
  { status: 'fulfilled', value: 'Success' },
  { status: 'rejected', reason: 'Failure' },
  { status: 'fulfilled', value: 'Complete' }
]

Wie erwartet wartet die Funktion darauf, dass alle Versprechen erfüllt werden, und das Ergebnisarray liefert uns detaillierte Informationen zu jedem Versprechen, einschließlich der Frage, ob es gelöst oder abgelehnt wurde.

Ein tieferer Blick auf Versprechen

Um das Verständnis zu stärken, lassen Sie uns die Funktionsweise von Versprechen aufschlüsseln:

• Promises stellen das letztendliche Ergebnis eines asynchronen Vorgangs dar. Wenn ein Versprechen erstellt wird, befindet es sich im Status „Ausstehend“.
• Ein Versprechen kann sein:

Aufgelöst (erfüllt), wenn der Vorgang erfolgreich abgeschlossen wurde.

Abgelehnt, wenn der Vorgang fehlschlägt.

Wird abgerechnet, wenn es entweder erfüllt oder abgelehnt wird

Mit der then()-Methode können wir eine Funktion angeben, die ausgeführt werden soll, wenn das Versprechen aufgelöst wird, während Catch() es uns ermöglicht, Ablehnungen zu verarbeiten. Die Verwendung von „final()“ stellt sicher, dass wir die Erfüllung des Versprechens (entweder Erfolg oder Misserfolg) ohne Duplikate abwickeln.

Abschluss

Promise.allSettled selbst zu implementieren ist eine fantastische Möglichkeit, zu verstehen, wie Versprechen auf einer grundlegenden Ebene funktionieren. Die wichtigste Erkenntnis ist, dass Promise.allSettled darauf wartet, dass alle Versprechen abgeschlossen werden, im Gegensatz zu Promise.all, das stoppt, wenn es auf eine Ablehnung stößt.

Durch die Implementierung von Grund auf haben Sie auch gelernt, wie Sie mehrere asynchrone Vorgänge sauber und effizient handhaben. Jetzt können Sie dieses Wissen nutzen, um mit Versprechen in jeder JavaScript-Umgebung zu arbeiten, auch solchen, die moderne Funktionen nicht nativ unterstützen.

Das obige ist der detaillierte Inhalt vonTutorial: Implementieren von Polyfills Promise.allSettled von Grund auf in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!