Promesses JavaScript

La métaphore d'une promesse

Une promesse (en anglais promise), consiste en un engagement à faire quelque chose. Par exemple, un camarade de classe peut vous promettre de remettre sa partie d’un travail d'équipe d’ici la fin de la semaine.

Le résultat d’une telle promesse n’est pas immédiatement disponible. Il faut se montrer patient et attendre que la promesse soit complétée. Par exemple, attendre que votre camarade remette sa partie, soit: jeudi, vendredi, samedi ou encore dimanche.

Une promesse est faite dans le but d’être respectée. Donc si votre camarade promet de remettre sa partie pour une date X, c’est qu’il est confiant de pouvoir respecter son engagement et lorsque ce sera chose faite, vous pourrez alors jumeler vos parties de travail d'équipe.

Dans de rares occasions, une promesse peut être brisée. Un contretemps pourrait par exemple empêcher votre camarade de remettre sa partie. Vous, vous tournerez alors vers un plan B.

Promesse JavaScript

Les Promises en JavaScript fonctionnent sur le même principe. À défaut de pouvoir répondre immédiatement une fonction peut retourner une promesse. Cette approche est particulièrement utile lorsque la fonction en question contacte un serveur externe, puisque son délai de réponse peut varier.

Si la promesse est respectée, la méthode .then() est ensuite appelée et la valeur de la réponse lui est passée en paramètre.

Si la promesse est brisée et qu’une méthode .catch() est présente, elle est appelée et un message d’erreur lui est envoyé.

Mise-en-contexte pour le cours

Bien qu’il soit possible de :

- faire ou construire une promesse en JavaScript (create)
- recevoir une promesse en JavaScript (consume),

il est plus fréquent d’en recevoir (consume).

D'abord, on apprendra comment faire, comment CONSTRUIRE UNE PROMESSE en JavaScript.

Par la suite, on apprendra plutôt à RECEVOIR CETTE PROMESSE. Donc, comprendre la façon dont une promesse est construite vous aidera à gérer la réception d'une telle promesse.

Dans l'exemple de l'image ci-dessous, on simule l'appel chez Uber pour demander un service. Uber fera donc la promesse d'une course en voiture (ride). Après un cerytain temps, on recevra une notification soit:
"✅ votre condcuteur est arrivé (driver arrived) ✅"
ou :
"🚫 votre conducteur a annulé votre requête (driver bailed) 🚫".

FAIRE (CONSTRUIRE) UNE PROMESSE - new Promise

Le code new Promise() permet de créer une promesse. Cette promesse est en fait un objet JavaScript contenant une fonction acceptant deux paramètres.

1. Le 1er paramètre correspond au nom d'une fonction à appeler lorsque la promesse est respectée.
2. Le 2e paramètre correspond au nom de la fonction à appeler lorsqu'elle est brisée.

Par exemple, la promesse suivante 👇 appelle la fonction resolve lorsqu'elle est respectée et reject lorsqu'elle est brisée.
La valeur du retour dans les deux cas est passée en paramètre.

const promesse = new Promise((resolve, reject) => { const respectPromesse = true; if (respectPromesse === true) { resolve("Promesse respectée"); } else { reject("Promesse brisée"); } });

Dans le cadre de cette démonstration, la promesse sera toujours respectée.

Cependant, un exemple plus concret serait le cas d'un service tentant de répondre à une demande d'informations. Si les informations sont trouvées, la fonction assignée au respect de la promesse est appelée. Si le délai imparti avant de trouver la réponse est dépassé, la fonction assignée au bris de promesse est appelée.

Promise Promise

Pour obtenir le résultat d'une promesse, il est impossible d'appeler directement la promesse.

Par exemple, le code suivant: console.log(promesse); // [objet Promise] {}

retournerait un message indiquant qu'il s'agit d'un objet de type Promise et non la valeur contenu dans la promesse.

RECEVOIR UNE PROMESSE - then() ✅

Si la promesse est respectée, une méthode .then() est appelée et la valeur lui est passée en paramètre.

Par exemple: promesse .then(valeur => console.log(valeur)); // "Promesse respectée"

Une méthode .then() retourne elle aussi une promesse. Cette promesse peut donc à son tour avoir un .then() et ainsi enchainer de multiple .then() un à la suite de l'autre.

Par exemple: promesse .then(value => `${value}, oh oui!!!`) .then(msg => console.log(msg)); // "Promesse respectée, oh oui!!!"
then() - catch() 🚫

Si la promesse est brisée et qu'une méthode .catch() est présente, cette dernière est appelée et la valeur lui est passée en paramètre.

Par exemple: promesse .catch(error => console.log(error)); // "Promesse brisée"
catch() - finally()

Si une méthode .finally() est présente, celle-ci est appelée dès que la promesse est complétée, peu importe son statut qu'elle soit respectée ou brisée.

Par exemple: promesse .finally(() => console.log("Promesse complétée")); finally()


Dans un exemple concret, tout mis ensemble donnerait ceci: promesse .then(value => console.log(value)) .catch(error => console.log(error)) .finally(() => console.log("Promesse complétée")); // "Promesse respectée", "Promesse complétée"

Résumé vidéo