JavaScript Academy · Lezione

Microtask e Promise

Scopra perché i callback delle promise vengono eseguiti per primi.

Microtask e Promise è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.

Che cos'è un microtask?

Un microtask è un'attività differita ad alta priorità. I callback delle Promise (.then, .catch, .finally) e queueMicrotask pianificano tutti dei microtask.

La regola fondamentale è questa: dopo ogni esecuzione sincrona, tutti i microtask vengono elaborati prima di qualsiasi macrotask.

I callback delle Promise sono differiti

Anche una Promise già risolta pianifica il proprio callback .then come microtask. Non viene eseguito in modo sincrono.

console.log('start');
Promise.resolve().then(() => console.log('promise then'));
console.log('end');

I microtask hanno la precedenza sui macrotask

Questa è la regola di ordinamento più importante. Un callback di una Promise viene eseguito prima di un callback di setTimeout, anche se il timer è stato pianificato per primo.

setTimeout(() => console.log('timeout (macro)'), 0);
Promise.resolve().then(() => console.log('promise (micro)'));
console.log('sync');

La coda dei microtask viene svuotata completamente

Il ciclo degli eventi svuota l'intera coda dei microtask prima di passare al macrotask successivo. Più callback di Promise vengono eseguiti tutti insieme durante questo svuotamento.

setTimeout(() => console.log('macro'), 0);
Promise.resolve().then(() => console.log('micro 1'));
Promise.resolve().then(() => console.log('micro 2'));
console.log('sync');

Promise concatenate

Ogni .then in una catena pianifica un nuovo microtask quando quello precedente viene completato. Vengono comunque eseguiti tutti prima di qualsiasi timer in attesa.

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');

Microtask pianificati durante lo svuotamento

Se un microtask pianifica un altro microtask, anche il nuovo viene eseguito durante lo stesso svuotamento, prima di qualsiasi macrotask. La coda continua a svuotarsi finché non è veramente vuota.

Promise.resolve().then(() => {
  console.log('micro A');
  Promise.resolve().then(() => console.log('micro B (added later)'));
});
setTimeout(() => console.log('macro'), 0);
console.log('sync');

I valori risolti vengono trasferiti nella catena

Un valore restituito da un gestore .then diventa l'input per il gestore successivo nella catena, il tutto tramite microtask.

Promise.resolve(2)
  .then(n => n * 3)
  .then(n => n + 1)
  .then(n => console.log('result', n));
console.log('sync first');

async/await usa i microtask

Il codice successivo a un await riprende l'esecuzione come microtask. Di conseguenza, una continuazione dopo un await viene eseguita prima di un timer pianificato in precedenza.

async function run() {
  console.log('a');
  await null;
  console.log('c (after await)');
}
setTimeout(() => console.log('d (timeout)'), 0);
run();
console.log('b');

Una dimostrazione dell'ordinamento completo

Metta insieme tutti gli elementi. Preveda l'ordine: prima il codice sincrono, poi tutti i microtask e infine il macrotask.

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');

Perché la starvation dei microtask è rischiosa

Poiché i microtask vengono sempre eseguiti prima dei macrotask, un microtask che pianifica continuamente altri microtask può impedire l'esecuzione dei timer e il rendering. Mantenga finite le catene di microtask.

let n = 0;
function loop() {
  if (n++ < 3) {
    console.log('micro ' + n);
    Promise.resolve().then(loop);
  }
}
setTimeout(() => console.log('macro after micros'), 0);
loop();

Perché questo ordinamento è importante

Sapere che i microtask vengono eseguiti prima dei macrotask spiega perché i risultati delle Promise compaiono prima dei callback dei timer e perché si verificano bug di ordinamento. La regola è semplice: sincrono, poi tutti i microtask, quindi un macrotask, e si ripete.

console.log('A');
Promise.resolve().then(() => console.log('B'));
setTimeout(() => console.log('D'), 0);
console.log('C');

Verifica rapida

Una Promise .then e un setTimeout(fn, 0) sono entrambi in attesa. Quale viene eseguito per primo?

Riepilogo: microtask e Promise

Ha appreso la regola delle priorità:

I microtask vengono generati dalle Promise e da queueMicrotask.
L'intera coda dei microtask viene svuotata prima di qualsiasi macrotask.
Le continuazioni di async/await sono microtask.
Catene infinite di microtask possono impedire l'esecuzione dei timer e il rendering.

Domande Frequenti

La lezione «Microtask e Promise» è gratuita?

Sì — il testo completo di «Microtask e Promise» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.

Cosa imparerò in «Microtask e Promise»?

Scopra perché i callback delle promise vengono eseguiti per primi. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Microtask e Promise»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?

Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a JavaScript Academy