Les promesses en javascript
Introduction au mode asynchrone :
Dans la vie de tous les jours, on dit que deux actions sont synchrones lorsqu’elles se déroulent
en même temps ou de manière synchronisée. Au contraire, deux opérations sont asynchrones
si elles ne se déroulent pas en même temps ou ne sont pas synchronisées.
En informatique, on dit que deux opérations sont synchrones lorsque la seconde attend que la
première ait fini son travail pour démarrer. Au contraire, deux opérations sont qualifiées
d’asynchrones en informatique lorsqu’elles sont indépendantes c’est-à-dire lorsque la
deuxième opération n’a pas besoin d’attendre que la première se termine pour démarrer.
Les fonctions de rappel : à la base de l’asynchrone en JavaScript
En JavaScript, les opérations asynchrones sont placées dans des files d’attentes qui vont
s’exécuter après que le fil d’exécution principal ou la tâche principale (le « main thread » en
anglais) ait terminé ses opérations. Elles ne bloquent donc pas l’exécution du reste du code
JavaScript.
Liens pour comprendre ce fonctionnement :
[Link]
[Link]
Exemple :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Callback Hell</title>
<style>
*{ padding: none;
margin: none;
box-sizing: border-box;
}
.word {
color: #308d46;
font-size: 4rem;
transition: all .5s ease-in;
margin: 0 5px;
transform: translateY(3.8rem);
opacity: 0; }
[Link] 1 ISFO
body {
display: flex;
justify-content: center;
align-items: center;
width: 95vw;
height: 95vh;}
.container {
overflow: hidden;
display: flex;
flex-direction: row; }
.animate {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body>
<div class="container">
<h2 class="word">Geeks</h2>
<h2 class="word">For</h2>
<h2 class="word">Geeks</h2>
</div>
</body>
<script>
let words = [Link](".word");
const animateAll = (animate) => {
setTimeout(() => {
animate(words[0]);
setTimeout(() => {
animate(words[1]);
setTimeout(() => {
animate(words[2]);
}, 1000)
}, 1000)
}, 1000)
}
const animate = (word) => {
[Link]("animate");
}
animateAll(animate);
</script>
</html>
Lorsqu'on imbrique les fonctions de rappel ainsi, le code devient moins lisible et moins
compréhensible et donc plus difficile à déboguer. C'est ce qu'on appelle parfois un « callback
hell » (généralement utilisé en anglais, cela signifie « l'enfer des fonctions de rappel »)
[Link] 2 ISFO
C'est pour ces raisons que la plupart des API asynchrones modernes n'utilisent plus
les callbacks. À la place, la programmation asynchrone en JavaScript utilise les promesses.
Les promesses :
Définition
En 2015, le JavaScript a intégré un nouvel outil dont l’unique but est la génération et la
gestion du code asynchrone : les promesses avec l’objet constructeur Promise.
Une promesse en JavaScript est un objet qui représente l’état d’une opération asynchrone.
Une opération asynchrone peut être dans l’un des états suivants :
Opération en cours (non terminée) ;
Opération terminée avec succès (promesse résolue) ;
Opération terminée ou plus exactement stoppée après un échec (promesse rejetée).
En JavaScript, nous allons pouvoir créer nos propres promesses ou manipuler des promesses
déjà créées.
Créer une promesse :
Pour créer une promesse, on va utiliser la syntaxe new Promise() qui fait donc appel au
constructeur Promise. Ce constructeur va prendre en argument une fonction qui va elle-même
prendre deux autres fonctions en arguments. La première sera appelée si la tâche asynchrone
est effectuée avec succès tandis que la seconde sera appelée si l’opération échoue.
Lorsque notre promesse est créée, celle-ci possède deux propriétés internes : une première
propriété state (état) dont la valeur va initialement être « pending » (en attente) et qui va
pouvoir évoluer « fulfilled » (promesse tenue ou résolue) ou « rejected » (promesse rompue
ou rejetée) et une deuxième propriété result qui va contenir la valeur du résultat.
Si la promesse est tenue, la fonction resolve() sera appelée tandis que si la promesse est
rompue la fonction reject() va être appelée. Ces deux fonctions sont des fonctions prédéfinies
en JavaScript. Nous allons pouvoir passer un résultat en argument pour chacune d’entre elles.
Cette valeur servira de valeur pour la propriété result de notre promesse.
En pratique, on va créer des fonctions asynchrones qui vont renvoyer des promesses :
[Link] 3 ISFO
Dans l'exemple ci-dessus, nous avons créé une promesse qui recherche les identifiants des
employés. Vous remarquez que l'objet promise reçoit une fonction de rappel qui accepte deux
arguments : resolve et reject.
Si l'opération réussit, la fonction "resolve" est appelée. En cas d'échec, la fonction "reject" est
appelée.
Maintenant, consommons notre promesse en utilisant. Les deux méthodes : then() et catch().
La méthode then () de l'objet renvoyé nous permet d'ajouter un gestionnaire d'événements
lorsque la promesse atteint son état de réussite, renvoyant ainsi le résultat de la fonction «
resolve ».
La méthode catch fonctionne de la même manière, mais le retour attendu provient de la
fonction "reject".
Le principe de base des promesses pour mettre fin à l’enfer des rappels est le suivant :
Une promesse prendra le contrôle des résultats des rappels : fonctions de résolution et de
rejet ;
Les promesses ont un autre avantage : le chaînage. Avec le chaînage, nous pouvons
simplement ajouter une nouvelle méthode then () après un then (). Cela nous donne un plus
grand contrôle sur notre chaîne de promesses résolues.
[Link] 4 ISFO
Async/Await
Async /await est une autre alternative pour consommer des promesses, et elle a été
implémentée dans ES8 ou ES2017.
Async/await est une nouvelle façon d'écrire des promesses basées sur du code asynchrone,
mais qui donne au code asynchrone l'apparence et le comportement d'un code synchrone.
C'est là que la magie opère.
[Link] 5 ISFO
[Link] 6 ISFO