Erstellen Sie Ihr eigenes Versprechen in JavaScript

Warum?

Um eine Vorstellung davon zu bekommen, wie JavaScript-Versprechungen unter der Haube Rückrufe asynchron ausführen.

Lassen Sie uns unser eigenes Versprechen in JavaScript erstellen! Wir folgen der Promise/A-Spezifikation, die beschreibt, wie Versprechen asynchrone Vorgänge handhaben, auflösen, ablehnen und eine vorhersehbare Verkettung und Fehlerbehandlung sicherstellen.

Der Einfachheit halber konzentrieren wir uns auf die wichtigsten Regeln, die in der Promises/A-Spezifikation mit ✅ gekennzeichnet sind. Dabei handelt es sich nicht um eine vollständige Implementierung, sondern um eine vereinfachte Version. Folgendes werden wir erstellen:

1. Terminologie

1.1 „Versprechen“ ist ein Objekt oder eine Funktion mit einer then-Methode, deren Verhalten dieser Spezifikation entspricht.

1.2 thenable' ist ein Objekt oder eine Funktion, die eine then-Methode definiert.

1.3 „Wert“ ist jeder zulässige JavaScript-Wert (einschließlich undefiniert, ein Thenable oder ein Versprechen).

1.4 „Ausnahme“ ist ein Wert, der mithilfe der throw-Anweisung ausgelöst wird.

1,5 „Grund“ ist ein Wert, der angibt, warum ein Versprechen abgelehnt wurde.

2. Anforderungen

2.1 Versprechenszustände

Ein Versprechen muss einen von drei Zuständen haben: ausstehend, erfüllt oder abgelehnt.

2.1.1. Wenn es noch aussteht, ein Versprechen: ✅

⟶ kann entweder in den Status „Erfüllt“ oder „Abgelehnt“ übergehen.

2.1.2. Bei Erfüllung ein Versprechen: ✅

⟶ darf nicht in einen anderen Zustand übergehen.

⟶ muss einen Wert haben, der sich nicht ändern darf.

2.1.3. Bei Ablehnung ein Versprechen: ✅

⟶ darf nicht in einen anderen Zustand übergehen.

⟶ muss einen Grund haben, der sich nicht ändern darf.

2.2 Die then-Methode

Ein Versprechen muss eine Methode bereitstellen, um auf seinen aktuellen oder eventuellen Wert oder Grund zuzugreifen.

Die then-Methode eines Versprechens akzeptiert zwei Argumente:

promise.then(onFulfilled, onRejected);

2.2.1. Sowohl onFulfilled als auch onRejected sind optionale Argumente: ✅

⟶ Wenn onFulfilled keine Funktion ist, muss sie ignoriert werden.

⟶ Wenn onRejected keine Funktion ist, muss sie ignoriert werden.

2.2.2. Wenn onFulfilled eine Funktion ist: ✅

⟶ Es muss aufgerufen werden, nachdem das Versprechen erfüllt wurde, mit dem Wert des Versprechens als erstem Argument.

⟶ Es darf nicht aufgerufen werden, bevor das Versprechen erfüllt ist.

⟶ es darf nicht mehr als einmal aufgerufen werden.

2.2.3. Wenn onRejected eine Funktion ist, ✅

⟶ Es muss aufgerufen werden, nachdem das Versprechen abgelehnt wurde, mit dem Grund des Versprechens als erstem Argument.

⟶ Es darf nicht aufgerufen werden, bevor das Versprechen abgelehnt wird.

⟶ es darf nicht mehr als einmal aufgerufen werden.

2.2.4. onFulfilled oder onRejected dürfen erst aufgerufen werden, wenn der Ausführungskontextstapel nur Plattformcode enthält. ✅

2.2.5. onFulfilled und onRejected müssen als Funktionen aufgerufen werden (d. h. ohne diesen Wert). ✅

2.2.6. Dann kann es sein, dass es mehrmals mit demselben Versprechen aufgerufen wird. ✅

⟶ Wenn das Versprechen erfüllt wird, müssen alle jeweiligen onFulfilled-Rückrufe in der Reihenfolge ihrer ursprünglichen Aufrufe bis dahin ausgeführt werden.

⟶ Wenn das Versprechen abgelehnt wird, müssen alle entsprechenden onRejected-Rückrufe in der Reihenfolge ihrer ursprünglichen Aufrufe bis dahin ausgeführt werden.

2.2.7. dann muss ein Versprechen zurückgegeben werden. ✅

promise.then(onFulfilled, onRejected);

⟶ Wenn entweder onFulfilled oder onRejected einen Wert x zurückgibt, führen Sie das Promise Resolution-Verfahren [[Resolve]](promise2, x) aus. ❌

⟶ Wenn entweder onFulfilled oder onRejected eine Ausnahme e auslöst, muss Promise2 mit e als Grund abgelehnt werden. ❌

⟶ Wenn onFulfilled keine Funktion ist und Versprechen1 erfüllt ist, muss Versprechen2 mit demselben Wert wie Versprechen1 erfüllt werden. ❌

⟶ Wenn onRejected keine Funktion ist und Promise1 abgelehnt wird, muss Promise2 aus demselben Grund wie Promise1 abgelehnt werden. ❌

Durchführung

Ein JavaScript-Promise benötigt eine Executor-Funktion als Argument, die sofort aufgerufen wird, wenn das Promise erstellt wird:

promise2 = promise1.then(onFulfilled, onRejected);

new Promise(excecutor);

Die Kernspezifikation „Promises/A“ befasst sich nicht damit, wie Versprechen erstellt, erfüllt oder abgelehnt werden. Es liegt an Ihnen. Aber die Implementierung, die Sie für die Konstruktion des Versprechens bereitstellen, muss mit asynchronen APIs in JavaScript kompatibel sein. Hier ist der erste Entwurf unserer Promise-Klasse:

const promise = new Promise((resolve, reject) => {
    // Runs some async or sync tasks
});

Regel 2.1 (Versprechenszustände) besagt, dass ein Versprechen einen von drei Zuständen haben muss: ausstehend, erfüllt oder abgelehnt. Außerdem wird erklärt, was in jedem dieser Staaten passiert.

Wenn ein Versprechen erfüllt oder abgelehnt wird, darf es nicht in einen anderen Zustand übergehen. Daher müssen wir sicherstellen, dass sich das Versprechen im Status „Ausstehend“ befindet, bevor wir einen Übergang vornehmen:

class YourPromise {
    constructor(executor) {
        this.state = 'pending';
        this.value = undefined;
        this.reason = undefined;

        const resolve = value => {
            if (this.state === 'pending') {
                this.state = 'fulfilled';
                this.value = value;
            }
        };

        const reject = reason => {
            if (this.state === 'pending') {
                this.state = 'rejected';
                this.reason = reason;
            }
        };

        try {
            executor(resolve, reject);  // The executor function being called immediately
        } catch (error) {
            reject(error);
        }
    }
}

Wir wissen bereits, dass der Anfangszustand eines Versprechens aussteht, und stellen sicher, dass dies so bleibt, bis es ausdrücklich erfüllt oder abgelehnt wird:

const resolve = value => {
    if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
    }
};

const reject = reason => {
    if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
    }
};

Da die Executor-Funktion sofort nach der Instanziierung des Versprechens aufgerufen wird, rufen wir sie innerhalb der Konstruktormethode auf:

this.state = 'pending';

Unser erster Entwurf der YourPromise-Klasse ist hier fertig.

Die Promise/A-Spezifikation konzentriert sich hauptsächlich auf die Definition einer interoperablen then()-Methode. Mit dieser Methode können wir auf den aktuellen oder eventuellen Wert oder Grund des Versprechens zugreifen. Lasst uns eintauchen.

Regel 2.2 (Die then-Methode) besagt, dass ein Versprechen eine then()-Methode haben muss, die zwei Argumente akzeptiert:

try {
    executor(resolve, reject);
} catch (error) {
    reject(error);
}

Sowohl onFulfilled als auch onRejected müssen aufgerufen werden, nachdem das Versprechen erfüllt oder abgelehnt wurde, wobei der Wert oder Grund des Versprechens als erstes Argument übergeben wird, wenn es sich um Funktionen handelt:

class YourPromise {
    constructor(executor) {
        // Implementation
    }

    then(onFulfilled, onRejected) {
        // Implementation
    }
}

Außerdem dürfen sie nicht vor der Erfüllung oder Ablehnung des Versprechens und auch nicht mehr als einmal aufgerufen werden. Sowohl onFulfilled als auch onRejected sind optional und sollten ignoriert werden, wenn es sich nicht um Funktionen handelt.

Wenn Sie sich die Regeln 2.2, 2.2.6 und 2.2.7 ansehen, werden Sie sehen, dass ein Versprechen eine then()-Methode haben muss, die then()-Methode mehrmals aufgerufen werden kann und eine zurückgeben muss Versprechen:

promise.then(onFulfilled, onRejected);

Der Einfachheit halber werden wir uns nicht mit separaten Klassen oder Funktionen befassen. Wir geben ein Promise-Objekt zurück und übergeben eine Executor-Funktion:

promise2 = promise1.then(onFulfilled, onRejected);

Wenn das Versprechen erfüllt ist, rufen wir innerhalb der Executor-Funktion den onFulfilled-Rückruf auf und lösen ihn mit dem Wert des Versprechens auf. Wenn das Versprechen ebenfalls abgelehnt wird, rufen wir den Rückruf onRejected auf und lehnen es mit dem Grund des Versprechens ab.

Die nächste Frage ist, was mit onFulfilled- und onRejected-Rückrufen zu tun ist, wenn sich das Versprechen noch im Status „Ausstehend“ befindet. Wir stellen sie wie folgt in die Warteschlange für einen späteren Anruf:

new Promise(excecutor);

Wir sind fertig. Hier ist der zweite Entwurf unserer Promise-Klasse, einschließlich der then()-Methode:

const promise = new Promise((resolve, reject) => {
    // Runs some async or sync tasks
});

Hier führen wir zwei Felder ein: onFulfilledCallbacks und onRejectedCallbacks als Warteschlangen zum Halten von Rückrufen. Diese Warteschlangen werden über then()-Aufrufe mit Rückrufen gefüllt, während das Versprechen aussteht, und sie werden aufgerufen, wenn das Versprechen erfüllt oder abgelehnt wird.

Testen Sie jetzt Ihre Promise-Klasse:

class YourPromise {
    constructor(executor) {
        this.state = 'pending';
        this.value = undefined;
        this.reason = undefined;

        const resolve = value => {
            if (this.state === 'pending') {
                this.state = 'fulfilled';
                this.value = value;
            }
        };

        const reject = reason => {
            if (this.state === 'pending') {
                this.state = 'rejected';
                this.reason = reason;
            }
        };

        try {
            executor(resolve, reject);  // The executor function being called immediately
        } catch (error) {
            reject(error);
        }
    }
}

Es sollte Folgendes ausgeben:

const resolve = value => {
    if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
    }
};

const reject = reason => {
    if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
    }
};

Andererseits, wenn Sie den folgenden Test durchführen:

this.state = 'pending';

Sie würden erhalten:

try {
    executor(resolve, reject);
} catch (error) {
    reject(error);
}

Statt:

class YourPromise {
    constructor(executor) {
        // Implementation
    }

    then(onFulfilled, onRejected) {
        // Implementation
    }
}

Warum? Das Problem liegt darin, wie die Methode then() Rückrufe verarbeitet, wenn die YourPromise-Instanz zum Zeitpunkt des Aufrufs von then() bereits aufgelöst oder abgelehnt wurde. Insbesondere wenn der Promise-Status nicht ausstehend ist, verschiebt die Methode then() die Ausführung des Rückrufs nicht ordnungsgemäß auf die nächste Mikrotask-Warteschlange. Und das führt zu einer synchronen Ausführung. In unserem Beispieltest:

⟶ Das Versprechen wird sofort mit dem Wert „Sofort gelöst“ gelöst.

⟶ Wenn Promise.then() aufgerufen wird, ist der Status bereits erfüllt, sodass der onFulfilled-Rückruf direkt ausgeführt wird, ohne in die nächste Mikrotask-Warteschlange verschoben zu werden.

Hier kommt die Regel 2.2.4 ins Spiel. Diese Regel stellt sicher, dass die then()-Rückrufe (onFulfilled oder onRejected) asynchron ausgeführt werden, auch wenn das Versprechen bereits gelöst oder abgelehnt wurde. Dies bedeutet, dass die Rückrufe erst ausgeführt werden dürfen, wenn der aktuelle Ausführungsstapel vollständig leer ist und nur Plattformcode (wie die Ereignisschleife oder die Mikrotask-Warteschlange) ausgeführt wird.

Warum ist diese Regel wichtig?

Diese Regel ist eine der wichtigsten Regeln in der Promise/A-Spezifikation. Denn es sorgt dafür, dass:

⟶ Selbst wenn ein Versprechen sofort aufgelöst wird, wird sein then()-Rückruf erst beim nächsten Tick der Ereignisschleife ausgeführt.

⟶ Dieses Verhalten stimmt mit dem Verhalten der anderen asynchronen APIs in JavaScript überein, z. B. setTimeout oder process.nextTick.

Wie können wir das erreichen?

Dies kann entweder mit einem Makrotask-Mechanismus wie setTimeout oder setImmediate oder mit einem Mikrotask-Mechanismus wie queueMicrotask oder process.nextTick erreicht werden. Weil die Rückrufe in einer Mikroaufgabe oder Makroaufgabe oder einem ähnlichen Mechanismus ausgeführt werden, nachdem der aktuelle JavaScript-Ausführungskontext beendet ist.

Um das oben genannte Problem zu beheben, müssen wir sicherstellen, dass die entsprechenden Rückrufe (onFulfilled oder onRejected) mithilfe von queueMicrotask asynchron ausgeführt werden, auch wenn der Status bereits erfüllt oder abgelehnt ist. Hier ist die korrigierte Implementierung:

promise.then(onFulfilled, onRejected);

Führen Sie den vorherigen Beispieltestcode erneut aus. Sie sollten die folgende Ausgabe erhalten:

promise2 = promise1.then(onFulfilled, onRejected);

Das ist es.

Inzwischen sollten Sie genau wissen, wie Rückrufe von then() zurückgestellt und in der nächsten Mikrotask-Warteschlange ausgeführt werden, wodurch asynchrones Verhalten ermöglicht wird. Ein solides Verständnis dieses Konzepts ist für das Schreiben effektiven asynchronen Codes in JavaScript unerlässlich.

Was kommt als nächstes? Da in diesem Artikel nicht die vollständige Promises/A-Spezifikation behandelt wurde, können Sie versuchen, den Rest zu implementieren, um ein tieferes Verständnis zu erlangen.

Da Sie es bis hierher geschafft haben, hoffe ich, dass Ihnen die Lektüre gefallen hat! Bitte teilen Sie den Artikel.

Folgen Sie mir auf:
LinkedIn, Medium und Github

Das obige ist der detaillierte Inhalt vonErstellen Sie Ihr eigenes Versprechen in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!