JavaScript Academy · Lektion

Mikrotasks und Promises

Erfahren Sie, warum Promise-Callbacks zuerst ausgeführt werden.

Lektion 3 von 413 Schritte

Mikrotasks und Promises ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist ein Microtask?

Ein Microtask ist ein zurückgestellter Job mit hoher Priorität. Promise-Callbacks (.then, .catch, .finally) und queueMicrotask planen jeweils Microtasks ein.

Die wichtigste Regel lautet: Nach jedem synchronen Durchlauf werden alle Microtasks abgearbeitet, bevor irgendeine Makrotask ausgeführt wird.

Promise-Callbacks werden verzögert ausgeführt

Selbst ein bereits aufgelöstes Promise plant seinen .then-Callback als Microtask ein. Er wird nicht synchron ausgeführt.

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

Microtasks haben Vorrang vor Macrotasks

Dies ist die wichtigste Regel für die Reihenfolge. Ein Promise-Callback wird vor einem setTimeout-Callback ausgeführt, selbst wenn der Timer zuerst eingeplant wurde.

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

Die Microtask-Warteschlange wird vollständig abgearbeitet

Die Event Loop leert die gesamte Microtask-Warteschlange, bevor sie die nächste Makrotask übernimmt. Mehrere Promise-Callbacks werden bei diesem Abarbeiten direkt nacheinander ausgeführt.

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

Verkettete Promises

Jedes .then in einer Kette plant eine neue Microtask ein, sobald die vorherige abgeschlossen ist. Trotzdem werden sie alle vor jedem noch ausstehenden Timer ausgeführt.

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

Während des Abarbeitens eingeplante Microtasks

Wenn eine Microtask eine weitere Microtask einplant, wird auch diese im selben Abarbeitungsvorgang vor jeder Makrotask ausgeführt. Die Warteschlange wird weiter geleert, bis sie wirklich leer ist.

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

Aufgelöste Werte werden weitergereicht

Ein von einem .then-Handler zurückgegebener Wert wird zum Eingangswert des nächsten Handlers in der Kette – alles über Microtasks.

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

async/await verwendet Microtasks

Code nach einem await wird als Microtask fortgesetzt. Deshalb wird eine Fortsetzung nach einem await vor einem zuvor eingeplanten Timer ausgeführt.

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

Ein kombiniertes Beispiel zur Reihenfolge

Führen Sie alles zusammen. Sagen Sie die Reihenfolge voraus: zuerst der synchrone Code, dann alle Microtasks und anschließend die Makrotask.

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

Warum Microtask-Starvation riskant ist

Da Microtasks immer vor Macrotasks ausgeführt werden, kann eine Microtask, die endlos weitere Microtasks einplant, Timer und Rendering aushungern. Halten Sie Microtask-Ketten endlich.

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

Warum diese Reihenfolge wichtig ist

Wenn Sie wissen, dass Microtasks vor Macrotasks ausgeführt werden, verstehen Sie, warum Promise-Ergebnisse vor Timer-Callbacks erscheinen und warum Fehler in der Reihenfolge auftreten. Die Regel ist einfach: Synchrones, dann alle Microtasks abarbeiten, dann eine Makrotask, wiederholen.

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

Kurze Überprüfung

Ein Promise-.then und ein setTimeout(fn, 0) sind beide ausstehend. Was wird zuerst ausgeführt?

Beantworte es in der interaktiven Lektion

Zusammenfassung: Microtasks und Promises

Sie haben die Prioritätsregel gelernt:

Microtasks entstehen durch Promises und queueMicrotask.
Die gesamte Microtask-Warteschlange wird vor jeder Makrotask abgearbeitet.
Fortsetzungen von async/await sind Microtasks.
Endlose Microtask-Ketten können Timer und Rendering aushungern.

Kostenlos starten

Lerne JavaScript mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 59
Lektionen: 200

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „Mikrotasks und Promises“ kostenlos?

Ja — der vollständige Text von „Mikrotasks und Promises“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Mikrotasks und Promises“?

Erfahren Sie, warum Promise-Callbacks zuerst ausgeführt werden. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Mikrotasks und Promises“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy