Premiers pas avec les promesses JavaScript

Dans les articles d’aujourd’hui, nous examinerons le concept de promesses en JavaScript et comment nous pouvons commencer à les utiliser dans nos flux de travail aujourd’hui.

Des promesses avec une histoire de petit-déjeuner

Une excellente façon de comprendre les promesses est de les utiliser dans un scénario courant auquel vous êtes déjà habitué. Supposons que vous ayez un colocataire, Alex, et que vous cuisiniez ensemble pour gérer les ressources. Donc pour le petit déjeuner aujourd’hui, vous vouliez faire des nouilles mais il n’y a pas de poudre d’ail à la maison et vous aimez tous les deux l’ail dans vos nouilles. La deuxième option de petit-déjeuner est le pain grillé si vous ne trouvez pas de poudre d’ail.

Vous avez tous les deux très faim et c’est à votre tour de préparer le petit-déjeuner, mais vous avez besoin de l’aide d’Alex, alors vous lui demandez d’aller au supermarché à proximité pour acheter de l’ail en poudre. Vous l’informez que vous n’attendrez pas qu’il revienne pour commencer à préparer le petit-déjeuner, il est donc important qu’il vous promette de vous appeler du supermarché. C’est ainsi que vous pouvez passer à faire du pain grillé s’il n’y a pas de poudre d’ail ou commencer à faire bouillir des nouilles s’il y en a, de sorte que la nourriture soit presque prête à son arrivée.

Une promesse

Une promesse JavaScript est un objet qui montre la réalisation ou l’échec éventuel d’une tâche qui n’a pas nécessairement besoin d’être terminée dès sa configuration. C’est une sorte de proxy pour une valeur qui n’est pas encore connue pour une opération asynchrone lorsqu’une promesse est faite. Cela crée essentiellement une possibilité pour les méthodes asynchrones de fonctionner comme si elles étaient des méthodes synchrones normales – la seule différence est qu’au lieu de renvoyer une valeur, l’async renverra une promesse de fournir la valeur au fil du temps.

La syntaxe de la promesse ressemble à ceci :

const myPromise = new Promise(function(myResolve, myReject) {


  myResolve(); 
  myReject();  
});


myPromise.then(
  function(value) {  },
  function(error) {  }
);

États des promesses JavaScript

Une promesse est généralement dans l’un des trois états. La première est lorsque la promesse vient d’être créée et que l’opération asynchrone n’a pas eu lieu, c’est ce qu’on appelle en attente. Pensez-y comme quand Alex sort de la maison avant d’arriver au supermarché et vérifie la poudre d’ail.

Le deuxième état d’une promesse est l’état accompli. Rappelez-vous que l’opération asynchrone consiste à obtenir de la poudre d’ail et donc si Alex trouve de la poudre d’ail, alors il m’informe et les nouilles deviennent le petit-déjeuner sûr – c’est une opération réussie. Ici, myResolve serait appelé et le gestionnaire associé mis en file d’attente à l’aide de la méthode then s’exécute.

L’autre option est l’état rejeté, où Alex n’a pas trouvé de poudre d’ail. Il m’informe et je passe à faire des toasts pour le petit déjeuner. C’est une opération ratée. Ici, myReject serait appelé et le gestionnaire associé mis en file d’attente à l’aide de la méthode then s’exécute.

Pourquoi voudriez-vous utiliser des promesses ?

L’une des raisons pour lesquelles les promesses ont été construites était d’éviter l’enfer des rappels. Ainsi, les rappels peuvent être utilisés pour faire le travail que les promesses font, mais ils peuvent devenir super complexes à mesure que le projet se développe et que la logique s’enchaîne. Pendant ce temps, la façon dont les promesses sont structurées, il est beaucoup plus facile de travailler avec des opérations asynchrones car vous l’utilisez comme vous le feriez avec n’importe quelle fonction synchrone (les promesses sont écrites de manière asynchrone dans les fonctions de la même manière que les fonctions synchrones sont écrites).

En outre, vous pouvez utiliser des promesses pour les opérations asynchrones dont vous ne connaissez pas encore le résultat et décider à l’avance de ce qui se passe pour chaque valeur de résultat possible.

Créer une promesse

Pour notre scénario décrit ci-dessus, voici une définition de promesse correspondante :

const myPromise = new Promise((resolve, reject) =>{
    let getGarlic = true
    console.log('pending...');
    if (getGarlic == true) {
        resolve('Resolved: There is Garlic Powder')
    } else {
        reject('Rejected: There is no Garlic Powder')    
    }
})

Si vous enregistrez ce bloc de code dans un nouveau fichier js et que vous l’exécutez, vous verrez qu’il est en attente. JavaScript fournit le then méthodes pour les promesses d’exécuter des rappels basés sur un rejet ou une résolution.

Ajout de rappels

Ajoutons des rappels pour les deux dans le bloc de code que nous avons déjà :

const myPromise = new Promise((resolve, reject) =>{
    let getGarlic = true
    console.log('pending...');
    if (getGarlic == true) {
        resolve('resolved: There is Garlic Powder')
    } else {
        reject('rejected: There is no Garlic Powder')    
    }
})
myPromise.then((message) => {
    console.log('Make noodles because the promise is' + ''+ message)
}).catch((message) =>{
    console.log('Make toast because the promise is ' + ''+ message) 
})

Maintenant, nous venons d’utiliser les méthodes then et catch pour résoudre à la fois un cas de réussite et un cas d’échec. Vous voyez comment, avec l’état actuel du getGarlic, le bon scénario se met en place et je suis informé avec précision de ce qu’il faut faire avant qu’Alex ne rentre à la maison.

Vous voyez que si la promesse réussit, la méthode then est exécutée et si elle échoue, la méthode catch est exécutée. Vous voyez également que les arguments de résolution et de rejet ont été injectés par défaut dans les rappels et nous pourrions les enregistrer dans la console.

Conclusion

Dans cet article, vous avez une bonne introduction aux promesses en JavaScript avec des blocs de code à illustrer. C’est un outil tellement merveilleux, surtout si vous extrayez des données de sources tierces ou effectuez d’autres opérations qui peuvent prendre un certain temps et que vous ne voulez pas que tous les autres processus attendent. Cela garantit également que si le résultat souhaité n’est pas atteint, vous pouvez le résoudre en réessayant ou en faisant quelque chose de complètement différent. Bon piratage !