Microtâches et promesses
Découvrez pourquoi les rappels de promesse s’exécutent en premier.
Microtâches et promesses est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.
Qu'est-ce qu'une microtâche ?
Une microtâche est une tâche différée hautement prioritaire. Les rappels de promesse (.then, .catch, .finally) et queueMicrotask planifient tous des microtâches.
La règle essentielle est la suivante : après chaque exécution synchrone, toutes les microtâches sont exécutées avant toute macrotâche.
Les rappels de promesse sont différés
Même une promesse déjà résolue planifie son rappel .then comme microtâche. Celui-ci ne s'exécute pas de manière synchrone.
console.log('start');
Promise.resolve().then(() => console.log('promise then'));
console.log('end');Les microtâches devancent les macrotâches
C'est la règle d'ordre d'exécution la plus importante. Un rappel de promesse s'exécute avant un rappel setTimeout, même si le minuteur a été planifié en premier.
setTimeout(() => console.log('timeout (macro)'), 0);
Promise.resolve().then(() => console.log('promise (micro)'));
console.log('sync');La file des microtâches est entièrement vidée
La boucle d'événements vide la totalité de la file des microtâches avant de prendre la macrotâche suivante. Plusieurs rappels de promesse s'exécutent tous ensemble pendant cette opération.
setTimeout(() => console.log('macro'), 0);
Promise.resolve().then(() => console.log('micro 1'));
Promise.resolve().then(() => console.log('micro 2'));
console.log('sync');Promesses en chaîne
Chaque .then d'une chaîne planifie une nouvelle microtâche lorsque la précédente se termine. Elles s'exécutent toujours avant tout minuteur en attente.
setTimeout(() => console.log('timeout'), 0);
Promise.resolve()
.then(() => console.log('then 1'))
.then(() => console.log('then 2'))
.then(() => console.log('then 3'));
console.log('sync');Microtâches planifiées pendant la vidange
Si une microtâche planifie une autre microtâche, la nouvelle s'exécute également pendant la même vidange, avant toute macrotâche. La file continue de se vider jusqu'à être réellement vide.
Promise.resolve().then(() => {
console.log('micro A');
Promise.resolve().then(() => console.log('micro B (added later)'));
});
setTimeout(() => console.log('macro'), 0);
console.log('sync');Les valeurs résolues sont transmises
Une valeur renvoyée par un gestionnaire .then devient l'entrée du gestionnaire suivant dans la chaîne, toujours par l'intermédiaire de microtâches.
Promise.resolve(2)
.then(n => n * 3)
.then(n => n + 1)
.then(n => console.log('result', n));
console.log('sync first');async/await utilise des microtâches
Le code qui suit un await reprend son exécution sous la forme d'une microtâche. Ainsi, une continuation après une attente s'exécute avant un minuteur planifié plus tôt.
async function run() {
console.log('a');
await null;
console.log('c (after await)');
}
setTimeout(() => console.log('d (timeout)'), 0);
run();
console.log('b');Démonstration combinée de l'ordre d'exécution
Regroupez tous ces éléments. Prévoyez l'ordre : d'abord le code synchrone, puis toutes les microtâches, et enfin la macrotâche.
console.log('1 sync');
setTimeout(() => console.log('5 timeout'), 0);
Promise.resolve().then(() => console.log('3 promise'));
Promise.resolve().then(() => console.log('4 promise'));
console.log('2 sync');Pourquoi la famine des microtâches est risquée
Comme les microtâches s'exécutent toujours avant les macrotâches, une microtâche qui planifie sans fin d'autres microtâches peut monopoliser les minuteurs et le rendu. Limitez la longueur des chaînes de microtâches.
let n = 0;
function loop() {
if (n++ < 3) {
console.log('micro ' + n);
Promise.resolve().then(loop);
}
}
setTimeout(() => console.log('macro after micros'), 0);
loop();Pourquoi cet ordre est important
Savoir que les microtâches s'exécutent avant les macrotâches explique pourquoi les résultats des promesses apparaissent avant les rappels des minuteurs et pourquoi des erreurs d'ordre surviennent. La règle est simple : synchrone, puis vidange de toutes les microtâches, puis une macrotâche, et on recommence.
console.log('A');
Promise.resolve().then(() => console.log('B'));
setTimeout(() => console.log('D'), 0);
console.log('C');Vérification rapide
Un .then de promesse et un setTimeout(fn, 0) sont tous deux en attente. Lequel s'exécute en premier ?
Récapitulatif : microtâches et promesses
Vous avez appris la règle de priorité :
- Les microtâches proviennent des promesses et de
queueMicrotask. - La file entière des microtâches est vidée avant toute macrotâche.
- Les continuations de
async/awaitsont des microtâches. - Des chaînes de microtâches sans fin peuvent monopoliser les minuteurs et le rendu.
Questions Fréquemment Posées
La leçon « Microtâches et promesses » est-elle gratuite ?
Oui — le texte complet de « Microtâches et promesses » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Microtâches et promesses » ?
Découvrez pourquoi les rappels de promesse s’exécutent en premier. Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer JavaScript Academy ?
Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Microtâches et promesses » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?
Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- La pile d’appels
- Macrotâches et file d’attente des tâches
- Microtâches et promesses
- queueMicrotask et ordre d’exécution