Promesses
La tasse est un paragraphe, #cup. Elle commence par blank, et le script la met à waiting avant de demander du thé.
pour ne rend pas la boisson. Il rend une promesse. Avec then, tu demandes à cette promesse d’écrire la boisson plus tard. La ligne sous pour dit encore waiting. La ligne devient waiting / lida tea.
Pas la tasse d’à l’instant
La page précédente a passé done à serve. serve a appelé la fonction avant de revenir, donc le journal en dessous était déjà lida tea / poured. Rien n’attendait.
Ici, la fonction donnée à then ne s’exécute pas à la ligne suivante. pour revient d’abord. La boisson apparaît quand ce script est fini.
Trois états
Une promesse est pending jusqu’à ce qu’elle se décide. resolve la tient avec une valeur. reject la rejette avec une raison. then ne s’exécute que pour une réussite. catch ne s’exécute que pour un rejet. Cette page n’a pas de minuteur. L’exécuteur appelle resolve ou reject tout de suite, et les gestionnaires attendent quand même la fin du script.
📊 Trois états
| État | Ce que tu vois | Facile à confondre |
|---|---|---|
| pending | la tasse dit encore waiting | la boisson est déjà sur la tasse |
| fulfilled | then reçoit lida tea | catch s’exécute aussi |
| rejected | catch reçoit no leaves | then reçoit la boisson |
L’exécuteur est maintenant, le gestionnaire non
La fonction donnée à new Promise s’exécute tout de suite. resolve("lida tea") peut donc arriver avant le retour de pour. La fonction de then est autre. Elle est mise en file. La ligne après pour(...) s’exécute pendant que la tasse dit waiting.
La ligne suivante attend encore
pour("lida") range une promesse dans order. La tasse a été mise à waiting. Le journal est ce mot, pas la boisson.
function pour(order) {
return new Promise(function (resolve, reject) {
if (order === "") {
reject("no leaves");
return;
}
resolve(order + " tea");
});
}
let cup = document.getElementById("cup");
cup.textContent = "waiting";
let order = pour("lida");
console.log(cup.textContent);
Le journal est waiting. order est la promesse. Ce n’est pas le texte lida tea.
then reçoit la boisson
Appelle then avec une fonction. Cette fonction reçoit la valeur passée à resolve. Elle écrit la boisson et la journalise. Ce journal n’est pas celui de la ligne suivante. C’est celui dans then.
function pour(order) {
return new Promise(function (resolve, reject) {
if (order === "") {
reject("no leaves");
return;
}
resolve(order + " tea");
});
}
let cup = document.getElementById("cup");
pour("lida").then(function (drink) {
cup.textContent = drink;
console.log(cup.textContent);
});
Le journal est lida tea. Un texte vide n’atteint pas ce gestionnaire.
Pas de feuilles
pour("") appelle reject("no leaves") et revient. catch reçoit cette raison. then ne s’exécute pas.
function pour(order) {
return new Promise(function (resolve, reject) {
if (order === "") {
reject("no leaves");
return;
}
resolve(order + " tea");
});
}
pour("").catch(function (reason) {
console.log(reason);
});
Le journal est no leaves.
La promesse n’est pas la boisson
order.then est une fonction. Tu sais ainsi que order est une promesse et non le texte voulu. Comparer la promesse à "lida tea" serait faux, et cet extrait n’affiche que le type de then.
function pour(order) {
return new Promise(function (resolve, reject) {
if (order === "") {
reject("no leaves");
return;
}
resolve(order + " tea");
});
}
let order = pour("lida");
console.log(typeof order.then);
Le journal est function.
La ligne sous la tasse
Le script met la tasse à waiting et pousse ce mot tout de suite. then pousse lida tea et joint les deux mots. La jointure est dans then, donc après le script, pas à la ligne suivante.
<!DOCTYPE html>
<html>
<head>
<title>promised-cup — page</title>
</head>
<body>
<p id="cup">blank</p>
<p id="line">…</p>
<script>
function pour(order) {
return new Promise(function (resolve, reject) {
if (order === "") {
reject("no leaves");
return;
}
resolve(order + " tea");
});
}
let cup = document.getElementById("cup");
let seen = [];
cup.textContent = "waiting";
seen.push(cup.textContent);
pour("lida").then(function (drink) {
seen.push(drink);
cup.textContent = drink;
document.getElementById("line").textContent = seen.join(" / ");
});
</script>
</body>
</html>
La ligne est waiting / lida tea. Waiting était immédiat. lida tea est arrivé dans then. Le mot blank a disparu. lida tea / poured est la page précédente.
Au comptoir
- Mets la tasse à waiting, appelle
pour("lida")et journalise la tasse tout de suite. Le journal est waiting. - Mets la boisson sur la tasse dans
then. Ce journal est lida tea. - Appelle
pour("")et attrape la raison aveccatch. Le journal est no leaves. - Lis
typeof order.then. Le journal est function. - Lis la ligne de la page : waiting / lida tea.
Ratés au comptoir
La tasse dit waiting jusqu’à ce que then s’exécute. Elle ne dit pas poured.
- Attendre que le journal sous
poursoit lida tea - Prendre la valeur renvoyée pour le texte de la boisson
- Utiliser
thenpour une commande vide et manquer no leaves - Utiliser
catchpour lida et attendre no leaves - Lire la ligne comme lida tea / poured
À retenir
pourrenvoie une promesse, pas le texte lida tea- La ligne suivante journalise encore waiting
thenreçoit lida tea après ce script- Une commande vide est rejetée avec no leaves, et
catchle journalise - La ligne de la page est waiting / lida tea
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut