Créez votre propre promesse en JavaScript

Pourquoi ?

Pour avoir une idée de la façon dont les promesses JavaScript exécutent des rappels de manière asynchrone sous le capot.

Créons notre propre promesse en JavaScript ! Nous suivrons la spécification Promise/A, qui décrit comment les promesses gèrent les opérations asynchrones, résolvent, rejettent et garantissent un chaînage et une gestion des erreurs prévisibles.

Pour garder les choses simples, nous nous concentrerons sur les règles clés marquées par ✅ dans la spécification Promises/A. Il ne s'agira pas d'une implémentation complète, mais d'une version simplifiée. Voici ce que nous allons construire :

1. Terminologie

1.1 'promesse' est un objet ou une fonction avec une méthode then dont le comportement est conforme à cette spécification.

1.2 thenable' est un objet ou une fonction qui définit une méthode then.

1.3 « valeur » est toute valeur JavaScript légale (y compris undéfini, un theable ou une promesse).

1.4 'exception' est une valeur qui est levée à l'aide de l'instruction throw.

1,5 « raison » est une valeur qui indique pourquoi une promesse a été rejetée.

2. Exigences

2.1 États promis

Une promesse doit être dans l'un des trois états suivants : en attente, remplie ou rejetée.

2.1.1. En attente, une promesse : ✅

⟶ peut passer à l'état satisfait ou rejeté.

2.1.2. Une fois remplie, une promesse : ✅

⟶ ne doit pas passer à un autre état.

⟶ doit avoir une valeur, qui ne doit pas changer.

2.1.3. En cas de rejet, une promesse : ✅

⟶ ne doit pas passer à un autre état.

⟶ doit avoir une raison, qui ne doit pas changer.

2.2 La méthode then

Une promesse doit fournir une méthode then pour accéder à sa valeur ou raison actuelle ou éventuelle.

La méthode then d'une promesse accepte deux arguments :

promise.then(onFulfilled, onRejected);

2.2.1. onFulfilled et onRejected sont des arguments facultatifs : ✅

⟶ Si onFulfilled n'est pas une fonction, elle doit être ignorée.

⟶ Si onRejected n'est pas une fonction, elle doit être ignorée.

2.2.2. Si onFulfilled est une fonction : ✅

⟶ il doit être appelé une fois la promesse remplie, avec la valeur de la promesse comme premier argument.

⟶ il ne doit pas être appelé avant que la promesse ne soit tenue.

⟶ il ne doit pas être appelé plus d'une fois.

2.2.3. Si onRejected est une fonction, ✅

⟶ il doit être appelé après le rejet de la promesse, avec la raison de la promesse comme premier argument.

⟶ il ne doit pas être appelé avant que la promesse ne soit rejetée.

⟶ il ne doit pas être appelé plus d'une fois.

2.2.4. onFulfilled ou onRejected ne doivent pas être appelés tant que la pile de contexte d'exécution ne contient que du code de plateforme. ✅

2.2.5. onFulfilled et onRejected doivent être appelés en tant que fonctions (c'est-à-dire sans cette valeur). ✅

2.2.6. alors peut être appelé plusieurs fois sur la même promesse. ✅

⟶ Si/quand la promesse est remplie, tous les rappels onFulfilled respectifs doivent s'exécuter dans l'ordre de leurs appels d'origine jusqu'à then.

⟶ Si/quand la promesse est rejetée, tous les rappels onRejected respectifs doivent s'exécuter dans l'ordre de leurs appels d'origine vers then.

2.2.7. alors il doit rendre une promesse. ✅

promise.then(onFulfilled, onRejected);

⟶ Si onFulfilled ou onRejected renvoie une valeur x, exécutez la procédure de résolution de promesse [[Resolve]](promise2, x). ❌

⟶ Si onFulfilled ou onRejected lève une exception e, promise2 doit être rejetée avec e comme raison. ❌

⟶ Si onFulfilled n'est pas une fonction et que promise1 est remplie, promise2 doit être remplie avec la même valeur que promise1. ❌

⟶ Si onRejected n'est pas une fonction et que promise1 est rejetée, promise2 doit être rejetée pour la même raison que promise1. ❌

Mise en œuvre

Une promesse JavaScript prend comme argument une fonction d'exécuteur, qui est appelée immédiatement lors de la création de la promesse :

promise2 = promise1.then(onFulfilled, onRejected);

new Promise(excecutor);

La spécification principale Promises/A ne traite pas de la manière de créer, de remplir ou de rejeter des promesses. C'est à vous. Mais l'implémentation que vous fournissez pour la construction de la promesse doit être compatible avec les API asynchrones en JavaScript. Voici la première ébauche de notre classe Promise :

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

La règle 2.1 (États de promesse) stipule qu'une promesse doit être dans l'un des trois états suivants : en attente, remplie ou rejetée. Il explique également ce qui se passe dans chacun de ces états.

Une fois remplie ou rejetée, une promesse ne doit pas passer à un autre état. Par conséquent, nous devons nous assurer que la promesse est en attente avant d’effectuer toute transition :

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);
        }
    }
}

Nous savons déjà que l'état initial d'une promesse est en attente, et nous veillons à ce qu'il le reste jusqu'à ce qu'il soit explicitement rempli ou rejeté :

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;
    }
};

Puisque la fonction exécuteur est appelée immédiatement lors de l'instanciation de la promesse, nous l'invoquons dans la méthode constructeur :

this.state = 'pending';

Notre première ébauche du cours YourPromise est réalisée ici.

La spécification Promise/A se concentre principalement sur la définition d'une méthode then() interopérable. Cette méthode nous permet d'accéder à la valeur ou à la raison actuelle ou éventuelle de la promesse. Plongeons-y.

La règle 2.2 (la méthode then) stipule qu'une promesse doit avoir une méthode then(), qui accepte deux arguments :

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

onFulfilled et onRejected doivent être appelés une fois la promesse remplie ou rejetée, en passant la valeur ou la raison de la promesse comme premier argument s'il s'agit de fonctions :

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

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

De plus, ils ne doivent pas être appelés avant que la promesse ne soit remplie ou rejetée, ni plus d'une fois. onFulfilled et onRejected sont facultatifs et doivent être ignorés s'il ne s'agit pas de fonctions.

Si vous regardez les règles 2.2, 2.2.6 et 2.2.7, vous verrez qu'une promesse doit avoir une méthode then(), la méthode then() peut être appelée plusieurs fois et elle doit renvoyer un promesse :

promise.then(onFulfilled, onRejected);

Pour simplifier les choses, nous ne traiterons pas de classes ou de fonctions distinctes. Nous renverrons un objet de promesse, en passant une fonction d'exécuteur :

promise2 = promise1.then(onFulfilled, onRejected);

Au sein de la fonction exécuteur, si la promesse est tenue, nous appelons le rappel onFulfilled et le résolvons avec la valeur de la promesse. De même, si la promesse est rejetée, nous appelons le rappel onRejected et la rejetons avec la raison de la promesse.

La question suivante est de savoir que faire des rappels onFulfilled et onRejected si la promesse est toujours en attente ? Nous les mettons en file d'attente pour être appelés plus tard, comme suit :

new Promise(excecutor);

Nous avons terminé. Voici la deuxième version de notre classe Promise, incluant la méthode then() :

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

Ici, nous introduisons deux champs : onFulfilledCallbacks et onRejectedCallbacks en tant que files d'attente pour conserver les rappels. Ces files d'attente sont remplies de rappels via des appels then() pendant que la promesse est en attente, et elles sont appelées lorsque la promesse est remplie ou rejetée.

Allez-y, testez votre classe Promise :

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);
        }
    }
}

Il devrait afficher :

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;
    }
};

Par contre, si vous faites le test suivant :

this.state = 'pending';

Vous obtiendrez :

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

Au lieu de :

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

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

Pourquoi ? Le problème réside dans la façon dont la méthode then() traite les rappels lorsque l'instance YourPromise est déjà résolue ou rejetée au moment où then() est appelé. Plus précisément, lorsque l'état promis n'est pas en attente, la méthode then() ne diffère pas correctement l'exécution du rappel vers la file d'attente de micro-tâches suivante. Et cela provoque une exécution synchrone. Dans notre exemple de test :

⟶ La promesse est immédiatement résolue avec la valeur 'Immédiatement résolue'.

⟶ Lorsque promise.then() est appelé, l'état est déjà rempli, donc le rappel onFulfilled est exécuté directement sans être reporté à la file d'attente de micro-tâches suivante.

Ici, la Règle 2.2.4 entre en jeu. Cette règle garantit que les rappels then() (onFulfilled ou onRejected) sont exécutés de manière asynchrone, même si la promesse est déjà résolue ou rejetée. Cela signifie que les rappels ne doivent pas s'exécuter tant que la pile d'exécution actuelle n'est pas complètement claire et que seul le code de la plate-forme (comme la boucle d'événements ou la file d'attente des micro-tâches) est en cours d'exécution.

Pourquoi cette règle est-elle importante ?

Cette règle est l’une des règles les plus importantes de la spécification Promise/A. Parce qu'il garantit que :

⟶ Même si une promesse est immédiatement résolue, son rappel then() ne s'exécutera pas avant le prochain tick de la boucle d'événement.

⟶ Ce comportement s'aligne sur le comportement des autres API asynchrones en JavaScript telles que setTimeout ou process.nextTick.

Comment pouvons-nous y parvenir ?

Cela peut être réalisé soit avec un mécanisme de macro-tâche tel que setTimeout ou setImmediate, soit avec un mécanisme de micro-tâche tel que queueMicrotask ou process.nextTick. Parce que les rappels dans une micro-tâche ou une macro-tâche ou un mécanisme similaire seront exécutés une fois le contexte d'exécution JavaScript actuel terminé.

Pour résoudre le problème ci-dessus, nous devons nous assurer que même si l'état est déjà rempli ou rejeté, les rappels correspondants (onFulfilled ou onRejected) sont exécutés de manière asynchrone à l'aide de queueMicrotask. Voici l'implémentation corrigée :

promise.then(onFulfilled, onRejected);

Exécutez à nouveau l'exemple de code de test précédent. Vous devriez obtenir le résultat suivant :

promise2 = promise1.then(onFulfilled, onRejected);

C'est tout.

À présent, vous devriez avoir une compréhension claire de la façon dont les rappels de then() sont différés et exécutés dans la prochaine file d'attente de micro-tâches, permettant un comportement asynchrone. Une solide maîtrise de ce concept est essentielle pour écrire du code asynchrone efficace en JavaScript.

Quelle est la prochaine étape ? Étant donné que cet article ne couvre pas l’intégralité de la spécification Promises/A, vous pouvez essayer d’implémenter le reste pour mieux comprendre.

Puisque vous êtes arrivé jusqu’ici, j’espère que vous avez apprécié la lecture ! Veuillez partager l'article.

Suivez-moi sur :
LinkedIn, Medium et Github

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!