Master JavaScript Promise : Résoudre, rejeter et enchaîner

Cet article couvre les fondamentaux nécessaires pour bien comprendre la promesse. Il couvre la résolution, le rejet, les rappels et le chaînage dans ECMAScript 6.

La promesse JavaScript est une fonctionnalité intéressante qui a aidé les développeurs à écrire un code propre et élégant. À la base, une promesse n'est qu'un objet qui produit une valeur unique dans le futur. Si la promesse a été tenue, elle produit une valeur résolue ; au contraire, il rejette avec une erreur sur le pourquoi si la promesse ne peut pas être tenue. de votre programme); selon le résultat, qu'il ait échoué ou réussi, il exécute ensuite un autre code une fois terminé. Plus important encore, il le fait d'une manière qui évite ce que les développeurs JS ont appelé au fil des ans "l'enfer du rappel". promesse avant le début d'une opération

L'une des idées fausses que les gens ont est que lorsqu'une promesse est réglée, elle a été résolue, mais en fait, cela signifie que la promesse a été soit résolue, soit rejetée. Ainsi, avant que l'opération d'une promesse ne commence, elle est en attente et après le début de la demande, elle est réglée (soit remplie, soit rejetée).

Remarque : Une fois qu'une promesse est réglée, elle ne peut pas être réinstallée. Il ne produit strictement qu'une seule valeur.

Par convention, vous ne pouvez pas accéder à l'état d'une promesse ; seule la fonction qui crée la promesse sait quand elle est réglée et si elle a été résolue ou rejetée.

Créer une promesse

Maintenant, créons une promesse simple juste pour poser les bases.

    const get[19659016]= x => nouveau Promesse((résolution, rejeter) =>[19659022]{  
      
    });

Tout d'abord, nous avons créé une fonction anonyme qui prend un argument x et renvoie un constructeur qui crée un objet promesse. L'objet de promesse prend deux paramètres, un pour le succès (résolution) et un pour l'échec (rejet) :

    if (x % 2 ===  0) {
      resolve(`${x} est un nombre pair`)[19659019];
    } else {
      reject("désolé");
    }

Ensuite, si la condition ci-dessus est Truela promesse sera résolue ; sinon, il sera rejeté.

Pour résumer, la fonction renvoie une promesse qui se résout si l'argument passé est un nombre pair, et elle rejette si ce n'est pas le cas. Nous avons donc créé notre première promesse. Maintenant, utilisons-le.

Promise Resolved

    get(3)
    .then(res =>  {
      console.log(res);
    })

La fonction get est appelée avec un argument 3après quoi la méthode .then est appelée si et seulement si la promesse est résolue.

Promesse rejetée

    .catch(erreur => {
      console.log(error);
    })

Si, en fonction de la condition, la promesse est rejetée, le [Laméthode.catch est appelée et enregistre l'erreur.

    .finally(() => {
      console.log("Êtes-vous satisfait");
    });

Le .enfin est appelé une fois la promesse réglée (qu'elle soit résolue ou rejetée, elle est appelée une fois la promesse réglée).

Remarque : Je recommande de toujours terminer toutes les chaînes de promesses par . catch()ou .finally est nécessaire.

Avant la promesse : rappels

Avant l'ajout de la fonctionnalité de promesse à JavaScript, les développeurs utilisaient le rappel (lorsqu'une fonction accepte une autre fonction en tant qu'argument, cette fonction contenue est appelée rappel). Ne vous méprenez pas, le rappel est toujours utile. C'est un concept de programmation fonctionnel de base encore utilisé dans des fonctions simples telles que setTimeout ou les appels d'API.

    setTimeout(() => { 
      console.log("Vous ne pouvez pas vous débarrasser de moi, vous voyez")
    }, 1000)[19659026] Plus tard, les développeurs ont inventé le terme « l'enfer des rappels » parce que les rappels peuvent devenir désordonnés si vous en enchaînez beaucoup. Voyons un exemple :
    request(function(response) {  
        secondRequest(response,[19659017]fonction(nextResponse) {    
            troisièmeRequête(nextResponse, fonction(finalResponse, fonction(finalResponse ) { console.log('Réponse finale : ' + finalResponse); }, échecCallback); }, échecRappel); }, échecRappel); 

Vous pouvez voir à quel point il est déroutant de transmettre chaque fonction en tant que rappel. Les fonctions de rappel sont utiles pour les opérations asynchrones courtes, mais lorsque vous travaillez avec de grands ensembles, cela n'est pas considéré comme la meilleure pratique. Nous utilisons donc toujours des fonctions de rappel avec les promesses, mais différemment (chaînage). et où les erreurs sont traitées. Maintenant, gérons la même opération de rappel ci-dessus avec des promesses - cette fois, le même code semble beaucoup plus propre et plus facile à lire :

    request()
      .then([19659070]fonction(réponse) {
        retour secondRequest(réponse);
    } ).puis(fonction(nextResponse) {  
        retour troisièmeRequête(nextRequête );
    }).puis( 
    fonction(réponse finale) {
        console.log('Réponse finale : ' + finalResponse);
    }).[19659070]catch(failureCallback);

Le code ci-dessus montre comment plusieurs rappels peuvent être enchaînés les uns après les autres avec un flux d'exécution synchrone. Le chaînage est l'une des meilleures caractéristiques de la promesse.

Conclusion

Il est essentiel de bien comprendre ce qui est couvert dans cet article pour approfondir votre compréhension de la promesse. J'espère que vous l'avez trouvé utile.