JavaScript Academy · Lektion

Microtasks och Promises

Lär dig varför callback-funktioner för promises körs först.

Lektion 3 av 413 steg

Microtasks och Promises är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Vad är en mikrouppgift?

En mikrouppgift är ett uppskjutet arbete med hög prioritet. Promise-callbacker (.then, .catch, .finally) och queueMicrotask schemalägger alla mikrouppgifter.

Den viktiga regeln är: efter varje synkron körning töms alla mikrouppgifter innan någon makrouppgift körs.

Promise-callbacker körs uppskjutet

Även ett redan uppfyllt Promise schemalägger sin .then-callback som en mikrouppgift. Den körs inte synkront.

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

Mikrouppgifter går före makrouppgifter

Det här är den viktigaste ordningsregeln. En Promise-callback körs före en setTimeout-callback, även om timern schemalades först.

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

Mikrouppgiftskön töms helt

Event loop tömmer hela mikrouppgiftskön innan nästa makrouppgift hämtas. Flera Promise-callbacker körs alla tillsammans när kön töms.

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

Kedjade Promise

Varje .then i en kedja schemalägger en ny mikrouppgift när den föregående har slutförts. De körs fortfarande alla innan någon väntande timer.

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

Mikrouppgifter som schemaläggs under tömningen

Om en mikrouppgift schemalägger en annan mikrouppgift körs den nya också under samma tömning, före alla makrouppgifter. Kön fortsätter att tömmas tills den verkligen är tom.

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

Uppfyllda värden förs vidare

Ett värde som returneras från en .then-hanterare blir indata till nästa hanterare i kedjan, allt via mikrouppgifter.

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

async/await använder mikrouppgifter

Kod efter ett await återupptas som en mikrouppgift. Därför körs en fortsättning efter await före en timer som schemalades tidigare.

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

Ett kombinerat ordningsexempel

Sätt ihop allt. Förutsäg ordningen: först synkron kod, sedan alla mikrouppgifter och därefter makrouppgiften.

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

Varför svältning av mikrouppgifter är riskabelt

Eftersom mikrouppgifter alltid körs före makrouppgifter kan en mikrouppgift som hela tiden schemalägger fler mikrouppgifter svälta ut timers och rendering. Håll kedjor av mikrouppgifter ändliga.

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

Varför den här ordningen spelar roll

Genom att känna till att mikrouppgifter körs före makrouppgifter blir det tydligt varför Promise-resultat visas före timercallbacker och varför ordningsbuggar uppstår. Regeln är enkel: synkron kod, töm sedan alla mikrouppgifter, kör därefter en makrouppgift och upprepa.

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

Snabb kontroll

Ett Promise-.then och en setTimeout(fn, 0) väntar båda på att köras. Vilken körs först?

Besvara frågan i den interaktiva lektionen

Sammanfattning: mikrouppgifter och Promise

Du lärde dig prioritetsregeln:

Mikrouppgifter kommer från Promise och queueMicrotask.
Hela mikrouppgiftskön töms innan någon makrouppgift körs.
Fortsättningar efter async/await är mikrouppgifter.
Oändliga kedjor av mikrouppgifter kan svälta ut timers och rendering.

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 59
Lektioner: 200

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Microtasks och Promises” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Microtasks och Promises”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Microtasks och Promises”?

Lär dig varför callback-funktioner för promises körs först. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?

Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Microtasks och Promises”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?

Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till JavaScript Academy