Tâches et microtâches — exercice corrigé de JavaScript : rendre le Web interactif (école d'ingénieur) (chapitre 9)

Tâches et microtâches

Programmation asynchrone · niveau 3 (difficile)

Énoncé

Prévoir l'ordre des huit affichages, en appliquant la méthode du cours (étape par étape, avec l'état des deux files).


console.log("1");
setTimeout(() => console.log("2"), 0);
Promise.resolve("3").then((x) => {
  console.log(x);
  setTimeout(() => console.log("4"), 0);
  return "5";
}).then((x) => console.log(x));
(async () => {
  console.log("6");
  await null;
  console.log("7");
})();
console.log("8");

Corrigé

Code synchrone : affiche 1 ; programme la tâche « 2 » ; Promise.resolve("3") est déjà tenue, son then entre dans la file des microtâches (appelons-le m1) ; la fonction fléchée async est appelée : elle affiche 6, puis await null la suspend, sa suite (m2) entre dans les microtâches ; affiche 8. Microtâches : [m1, m2] ; tâches : [2].
m1 affiche 3, programme la tâche « 4 », renvoie "5" : la promesse suivante est tenue, son then (m3) entre dans la file. Microtâches : [m2, m3] ; tâches : [2, 4].
m2 affiche 7 ; m3 affiche 5. Microtâches vides.
Tâche « 2 », puis tâche « 4 ».

L'ordre est donc 1, 6, 8, 3, 7, 5, 2, 4 : c'est bien celui qu'affiche Node pour le programme exercices/ex2-micro.mjs. Le piège : croire que « 5 » suit immédiatement « 3 ». Le second then n'entre dans la file qu'au retour du premier, derrière la suite de la fonction asynchrone.