Erstellen von XPromise: Ein tiefer Einblick in benutzerdefinierte JavaScript-Versprechen

JavaScript ist für seine asynchrone Natur bekannt und ermöglicht Vorgänge wie Datenabruf, Animationen und Dateiverwaltung, ohne andere Prozesse zu blockieren. Versprechen sind das Herzstück der ordnungsgemäßen Handhabung asynchroner Vorgänge und machen unseren Code sauberer und verwaltbarer. Dieses Projekt, XPromise, ist eine benutzerdefinierte Implementierung von JavaScript Promises und hilft uns zu untersuchen, wie der Promise-Mechanismus intern funktioniert.

Sie können sich die vollständige Implementierung auf GitHub ansehen.

Was ist ein Versprechen?

Ein Promise in JavaScript ist ein spezielles Objekt, das den eventuellen Abschluss oder Misserfolg eines asynchronen Vorgangs darstellt. Mit Promises können wir Vorgänge in die Warteschlange stellen, die nach Abschluss einer Aufgabe ausgeführt werden sollen, auch wenn wir nicht wissen, wann sie erledigt sein werden. Das macht ein Versprechen einzigartig:

1. Drei Zustände: Eine Zusage kann ausstehend, erfüllt oder abgelehnt sein.
2. Unveränderliche Zustandsänderung: Sobald ein Versprechen gelöst (erfüllt oder abgelehnt) ist, kann es seinen Zustand nicht mehr ändern.
3. Verkettung mit .then und .catch: Versprechen stellen .then() für die Behandlung erfüllter Werte und .catch() für Fehler bereit, wodurch sie zusammensetzbar werden.

Warum ein individuelles Versprechen erstellen?

Das Erstellen eines benutzerdefinierten Versprechens wie XPromise bietet ein tieferes Verständnis seiner inneren Funktionsweise:

• Zustandsverwaltung: Wir behandeln Zustände so, dass nur ein Endzustand gewährleistet ist.
• Rückrufwarteschlange: Das Versprechen muss Rückrufe in die Warteschlange stellen, damit sie ausgeführt werden, sobald das Problem gelöst ist.
• Fehlerbehandlung: Es beinhaltet eine Möglichkeit, asynchrone Fehler elegant zu behandeln und das native Promise-Verhalten zu emulieren.

Projektdurchgang

Lassen Sie uns den Code für XPromise durchgehen und jede Komponente untersuchen, die dafür sorgt, dass es genau wie die nativen Promises von JavaScript funktioniert.

Einrichten von Zuständen und Grundstruktur

XPromise definiert zunächst drei Zustände: AUSSTEHEND, ERFÜLLT und ABGELEHNT.

const PENDING = "PENDING";
const FULFILLED = "FULFILLED";
const REJECTED = "REJECTED";

class XPromise {
  constructor(executor) {
    this.state = PENDING;
    this.queue = [];
    doResolve(this, executor);
  }
  // ...
}

1. Konstrukteur und Ersteinrichtung:
   • XPromise akzeptiert eine Executor-Funktion, die sofort ausgeführt wird.
   • this.state verfolgt den aktuellen Status, während this.queue alle Funktionen enthält, die durch .then()-Aufrufe in die Warteschlange gestellt werden.

Hinzufügen der Methoden „then“, „catch“ und „finally“.

Mit „dann“, „catch“ und „final“ behandeln wir Erfüllungs-, Ablehnungs- und Bereinigungsszenarien. So erreicht XPromise die Verkettung:

const PENDING = "PENDING";
const FULFILLED = "FULFILLED";
const REJECTED = "REJECTED";

class XPromise {
  constructor(executor) {
    this.state = PENDING;
    this.queue = [];
    doResolve(this, executor);
  }
  // ...
}

1. then: Die then-Methode erstellt eine neue XPromise-Instanz und speichert sie zusammen mit den Rückrufen onFulfilled und onRejected. Dadurch wird sichergestellt, dass das nächste Versprechen in der Kette die Ausgabe des vorherigen erhält.
2. catch: Eine Abkürzung für die Fehlerbehandlung, äquivalent zum Aufruf von then(null, onRejected).
3. finally: Behandelt Bereinigungsaktionen, die unabhängig vom Ergebnis des Versprechens ausgeführt werden.

Verwalten gelöster Zustände mit Handle

Die Handle-Funktion entscheidet, ob das Promise noch aussteht oder gelöst ist. Wenn es aussteht, wird der Handler der Warteschlange hinzugefügt, um später ausgeführt zu werden. Wenn das Promise aufgelöst wird, verarbeitet es den Handler sofort.

then(onFulfilled, onRejected) {
  const promise = new XPromise(() => {});
  handle(this, { promise, onFulfilled, onRejected });
  return promise;
}

catch(onRejected) {
  return this.then(null, onRejected);
}

finally(onFinally) {
  return this.then(onFinally, onFinally);
}

Versprechen einlösen und ablehnen

Erfüllte und abgelehnte Versprechen benötigen spezielle Funktionen, um ihre Ergebnisse zu verarbeiten. So erreicht XPromise es:

function handle(promise, handler) {
  while (promise.state !== REJECTED && promise.value instanceof XPromise) {
    promise = promise.value;
  }

  if (promise.state === PENDING) {
    promise.queue.push(handler);
  } else {
    handleResolved(promise, handler);
  }
}

1. Erfüllen und Ablehnen:

   • Erfüllen und ablehnen, das Versprechen abschließen und seinen Zustand und Wert aktualisieren.
   • Wenn der Wert ein Versprechen oder dann möglich ist, verschieben wir doResolve, um sicherzustellen, dass er korrekt gehandhabt wird.

2. Abschließen von Handlern in der Warteschlange:

   • Sobald das Versprechen gelöst ist, durchläuft Finale die Warteschlange, um alle Handler der Reihe nach auszuführen.

Die Executor-Funktion doResolve

Die doResolve-Funktion führt den Executor sicher aus, indem sie Auflösungs- und Ablehnungsaufrufe umschließt und so weitere Zustandsänderungen verhindert, wenn sie mehrmals aufgerufen werden.

function fulfill(promise, value) {
  if (value === promise) {
    return reject(promise, new TypeError());
  }

  if (value && (typeof value === "object" || typeof value === "function")) {
    let then;
    try {
      then = value.then;
    } catch (e) {
      return reject(promise, e);
    }

    if (typeof then === "function") {
      return doResolve(promise, then.bind(value));
    }
  }

  promise.state = FULFILLED;
  promise.value = value;
  finale(promise);
}

function reject(promise, reason) {
  promise.state = REJECTED;
  promise.value = reason;
  finale(promise);
}

Beispielverwendung von XPromise

Da wir nun ein funktionierendes XPromise haben, probieren wir es anhand eines einfachen Beispiels aus:

function doResolve(promise, executor) {
  let called = false;
  function wrapFulfill(value) {
    if (called) return;
    called = true;
    fulfill(promise, value);
  }

  function wrapReject(reason) {
    if (called) return;
    called = true;
    reject(promise, reason);
  }
  try {
    executor(wrapFulfill, wrapReject);
  } catch (e) {
    wrapReject(e);
  }
}

Wichtige Erkenntnisse

Die Neuimplementierung von Promises von Grund auf bietet praktische Einblicke in die Verwaltung der asynchronen Programmierung in JavaScript:

• Statusverwaltung stellt sicher, dass das Versprechen nur einmal eingelöst wird und entweder erfüllt oder abgelehnt bleibt.
• Rückrufwarteschlange ermöglicht die effektive Bearbeitung mehrerer verketteter .then()-Anrufe.
• Fehlerbehandlung mit Catch und hilft endlich dabei, asynchrone Fehler elegant zu behandeln.

Um tiefer in den Code einzutauchen, schauen Sie sich das XPromise-Projekt auf GitHub an. Experimentieren Sie mit dem Code und passen Sie ihn gerne an, um erweiterte Funktionen wie Promise-Race-Bedingungen, Verkettung und Verschachtelung zu erkunden!

Das obige ist der detaillierte Inhalt vonErstellen von XPromise: Ein tiefer Einblick in benutzerdefinierte JavaScript-Versprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!