Zum Inhalt
wannacode

async ist kein Thread

Kurz gesagt: async und await laufen in JavaScript mit einem Event Loop auf einem Thread: await gibt den Thread beim Warten frei, deshalb ist ein Wettlauf zwischen zwei Wartezeiten auch ohne Threads möglich.

Problem

Der letzte Artikel, zweimal verkauft

Der Sale läuft auf Hochtouren. Ein Paar Kopfhörer ist übrig. checkout prüft den Bestand, wartet, bis die Bank die Zahlung bestätigt, und verringert den Bestand erst dann. Zwei Kunden drücken im selben Moment auf „Kaufen“:

// Die Bank bestätigt die Zahlung in 100 ms.
async function pay(buyer) {
  await sleep(100);
}


let stock = 1;
let sold = 0;


async function checkout(buyer) {
  const left = stock;
  if (left === 0) return;
  await pay(buyer);
  stock = left - 1;
  sold++;
}


await Promise.all([checkout("Anna"), checkout("Ben")]);
console.log(`Verkauft: ${sold}, Bestand: ${stock}`);
Ausgabe
Verkauft: 2, Bestand: 0

Zwei sind verkauft, und es gibt einen Artikel. Ein Kunde bekommt eine E-Mail „Deine Bestellung wurde versandt“ für Kopfhörer, die es nicht gibt.

In JavaScript wirkt das unmöglich: Der Code läuft in einem Thread. In der Lektion Race Condition sind zwei Threads bei count++ zusammengestoßen. Hier gibt es keinen zweiten Thread.

Die Ausgabe ist bei jedem Lauf gleich: Das ist kein Pech, sondern die Reihenfolge, in der der Code läuft. Um sie zu sehen, müssen wir wissen, was await tut.

Die Idee

Ein Thread und viele Wartezeiten

Der größte Teil der Arbeit in einem Onlineshop ist Arbeit, die wartet (siehe Arbeit, die wartet, und Arbeit, die rechnet): Die Zahlung wartet auf die Bank, die E-Mail auf den Mailserver, der Bestand auf das Lager. Ein Thread, der dasitzt und wartet, ist verschwendet.

Ein Event Loop ist ein Thread und eine Warteschlange von Codestücken, die bereit sind. Der Thread nimmt das nächste Stück und führt es bis zum Ende aus. Kommt der Code an eine Wartestelle, hält er den Thread nicht fest: Er sagt „weck mich, wenn die Bank antwortet“ und lässt los. Der Thread nimmt das nächste bereite Stück. Antwortet die Bank, kommt der Rest der Funktion (die Fortsetzung) in die Warteschlange und wartet auf seinen Einsatz.

In Node ist der Event Loop eingebaut. await ist genau diese Stelle: Die Funktion hält an, der Thread ist frei, und die Fortsetzung kommt in die Warteschlange, wenn das Promise bereit ist. Timer, Netzwerk und Dateien warten außerhalb deines JavaScripts.

Drei Anfragen an drei Dienste, gleichzeitig gestartet:

let waiting = 0;
let most = 0;


async function call(name, ms) {
  waiting++;
  most = Math.max(most, waiting);
  await sleep(ms);
  waiting--;
  console.log(`${name}: fertig nach ${ms} ms`);
}


await Promise.all([
  call("Zahlung", 300),
  call("E-Mail", 100),
  call("Lager", 200),
]);
console.log(`Gleichzeitig gewartet: ${most}`);
Ausgabe
E-Mail: fertig nach 100 ms
Lager: fertig nach 200 ms
Zahlung: fertig nach 300 ms
Gleichzeitig gewartet: 3
Jedes call läuft bis await sleep(ms) und gibt ein Promise zurück. Promise.all wartet auf alle drei.

„Gleichzeitig gewartet: 3“: Alle drei Anfragen warten zur selben Zeit, und es gibt nur einen Thread. Alles dauert etwa 300 ms (die längste), nicht 600 (die Summe). Der Thread hat auf keine von ihnen gewartet.

Probier es aus

Wie viele warten gleichzeitig

Dasselbe call, aber auf die erste Anfrage wird allein gewartet:

Was gibt das Programm aus?

await call("Zahlung", 300);
await Promise.all([call("E-Mail", 100), call("Lager", 200)]);
console.log(`Gleichzeitig gewartet: ${most}`);
Antwort

Sieh es dir an

Ein Wettlauf zwischen zwei awaits

Zurück zum letzten Artikel. So greifen die beiden Bestellungen ineinander:

let stock = 1;
let sold = 0;


async function checkout(buyer) {
  const left = stock;
  if (left === 0) return;
  await pay(buyer);
  stock = left - 1;
  sold++;
}
Schritt für Schritt, in Worten
  1. Ein Artikel ist übrig. Zwei Bestellungen kommen im selben Moment: die von Anna und die von Ben.
  2. Der checkout von Anna liest den Bestand: left ist 1. Am await gibt er den Thread frei, bis die Bank antwortet.
  3. Der Thread ist frei, also läuft der checkout von Ben. Auch er liest 1: Anna hat noch nichts geschrieben.
  4. Die Bank antwortet Anna. Ihr Code läuft nach dem await weiter: stock = left - 1 = 0, sold = 1. Bis hierhin stimmt es.
  5. Ben macht mit dem alten left = 1 weiter: wieder stock = 0, sold = 2. Ein Artikel, zwei Verkäufe, und das mit nur einem Thread.

Zwischen zwei awaits läuft der Code ohne Unterbrechung. Aber an einem await gibt die Funktion den Thread frei, und währenddessen kann alles andere laufen. Wenn sie weitermacht, kann die Welt eine andere sein: left ist ein Wert, der vor dem Warten gelesen wurde.

Das ist dasselbe „lesen, ändern, schreiben“ wie bei Threads, nur ist die Unterbrechung nicht irgendwo, sondern genau am await. Deshalb ist die Ausgabe auch bei jedem Lauf gleich: Die Unterbrechung ist nicht zufällig.

Die Idee

Die Lösung: den Artikel vor dem await reservieren

Prüfung und Verringerung müssen ein Stück Code ohne await dazwischen sein. Die Bestellung reserviert den Artikel sofort und wartet erst dann auf die Bank:

let stock = 1;
let sold = 0;


async function checkout(buyer) {
  if (stock === 0) return;
  stock--;   // den Artikel vor dem await reservieren
  await pay(buyer);
  sold++;
}
Ausgabe
Verkauft: 1, Bestand: 0
Zwischen if (stock === 0) und stock-- steht kein await, deshalb kann keine andere Bestellung dazwischenkommen. Ben sieht 0 und geht.

Scheitert die Zahlung, muss der Artikel zurückgegeben werden. Das ist die Übung am Ende.

Genauer, für Neugierige

Manchmal muss das ganze Stück zusammen mit dem Warten gesperrt werden: zum Beispiel darf nur eine Bestellung gleichzeitig in ein altes Lagersystem schreiben, das nicht zwei verträgt. Dann brauchst du einen Lock, der await versteht:

Node hat keinen eingebaut. Du schreibst einen mit einem Promise (einer Warteschlange von Wartenden) oder nimmst das Paket async-mutex.

Wie es in den anderen Sprachen ist: In JavaScript und in asyncio gibt es einen Thread, und das Stück zwischen zwei awaits läuft allein. In C# liegen die Fortsetzungen im Thread-Pool, deshalb braucht man dort auch einen lock. Java hat kein await: Dort macht man dasselbe mit CompletableFuture, und seit Java 21 auch mit virtuellen Threads, bei denen du gewöhnlichen blockierenden Code schreibst und die JVM den Thread selbst abhängt, solange er wartet.

Probier es aus

Finde den Fehler

Der Warenkorb addiert die Preise dreier Bestellungen. Der Preis kommt mit await aus dem Lager. Die drei Bestellungen kosten je 25 €, und die Summe kommt als 25 heraus:

let total = 0;


async function addOrder(id) {
  total += await priceOf(id);
}


await Promise.all([addOrder(1), addOrder(2), addOrder(3)]);
console.log(`Gesamt: ${total} €`);
Ausgabe
Gesamt: 25 €

Wähle die Zeile mit dem Fehler.

Die Idee

Blockiere den Event Loop nicht

Der Event Loop funktioniert nur, wenn kein Codestück den Thread lange festhält. Der Verkaufsbericht wird mit einer Schleife erstellt, die 300 ms rechnet. Gleichzeitig öffnet ein Kunde eine Produktseite, die 50 ms auf das Lager wartet:

function buildReport() {
  const end = Date.now() + 300;   // rechnet 300 ms ohne ein einziges await
  while (Date.now() < end) {}
}


async function report() {
  buildReport();
  console.log("Der Bericht ist fertig");
}


async function productPage(buyer, start) {
  await sleep(50);
  console.log(`${buyer} wartet über 0,25 s: ${Date.now() - start > 250}`);
}


const start = Date.now();
await Promise.all([report(), productPage("Anna", start)]);
Ausgabe
Der Bericht ist fertig
Anna wartet über 0,25 s: true

Die Seite hat über 0,25 s gewartet statt 50 ms. Solange der Bericht den Thread festhält, kann keine andere Fortsetzung laufen: nicht diese Seite, nicht die Zahlungen, nicht die Timer. Auf einem Server mit Tausenden Kunden frieren alle gleichzeitig ein.

Die Lösung: Halte die schwere Arbeit aus dem Thread des Event Loops heraus. Sie geht in einen Thread-Pool oder einen Worker, und der Event Loop wartet nur auf das Ergebnis:

async function report() {
  const worker = new Worker(new URL(import.meta.url));
  await once(worker, "exit");
  console.log("Der Bericht ist fertig");
}


async function productPage(buyer) {
  await sleep(50);
  console.log(`${buyer}: die Seite ist fertig`);
}


if (isMainThread) {
  await Promise.all([report(), productPage("Anna")]);
} else {
  buildReport();
}
Ausgabe
Anna: die Seite ist fertig
Der Bericht ist fertig
Der Bericht wird in einem Worker erstellt: dieselbe Datei, in der isMainThread false ist. Der Hauptthread wartet nur auf das Ereignis exit. Die Seite ist nach 50 ms fertig, der Bericht nach 300.

Probier es aus

Ergänze

Starte die drei Anfragen gleichzeitig und warte gemeinsam auf sie:

await ([
  call("Zahlung", 300),
  call("E-Mail", 100),
  call("Lager", 200),
]);
console.log(`Gleichzeitig gewartet: ${most}`);

Übung

Reservieren, bezahlen, zurückgeben

Löse die Aufgabe in deinem eigenen Editor.

Es sind zwei Artikel übrig. Vier Kunden bestellen gleichzeitig: Anna, Ben, Vera und Greta. Die Zahlung dauert 100 ms. Bens Karte wird abgelehnt: Die Zahlung wirft eine Exception mit dem Text „Karte abgelehnt“.

checkout reserviert den Artikel vor dem await und bezahlt dann. Scheitert die Zahlung, wird der Artikel zurückgegeben. Gib das Ergebnis jedes Kunden in der Reihenfolge der Bestellungen aus und am Ende den Bestand und die Zahl der Verkäufe:

Ausgabe
Anna: bezahlt
Ben: Karte abgelehnt, der Artikel wird zurückgegeben
Vera: nicht auf Lager
Greta: nicht auf Lager
Bestand: 1, verkauft: 1

Vera und Greta sehen „nicht auf Lager“, weil Bens Artikel reserviert bleibt, bis die Bank antwortet. Das ist fair: Der zurückgegebene Artikel geht an den nächsten Kunden.

Weitere Aufgaben

  • Noch einmal versuchen. Findet ein Kunde keinen Bestand, aber ein anderer könnte einen Artikel zurückgeben, lass ihn bis zu 200 ms warten und es noch einmal versuchen.
  • Timeout. Die Bank antwortet manchmal nicht. Dauert die Zahlung über 1 s, lehne die Bestellung ab und gib den Artikel zurück. (AbortSignal.timeout)
  • Bericht. Berechne die Summe der Verkäufe (je 25 €) und gib sie am Ende aus.

Test

Teste dich

1. In wie vielen Threads läuft dein Code in JavaScript (Node) und in Python asyncio?
2. Drei Anfragen warten 100, 200 und 300 ms. Wie lange dauert es insgesamt, wenn du sie nacheinander mit await abwartest, und wie lange mit Promise.all, gather, Task.WhenAll oder allOf?
3. In JavaScript und Python liest eine async-Funktion gemeinsame Daten, wartet mit await und schreibt dann. Wann kann anderer Code die Daten ändern?
4. Die Bearbeitung einer Anfrage enthält eine Berechnung, die 2 Sekunden dauert, ohne ein einziges await. Was passiert mit den anderen Anfragen in Node oder asyncio?
5. Wie vermeidest du, dass der letzte Artikel zweimal verkauft wird?

Erstellt von Ivo Gergov im Rahmen der Kampagne von Evo Tech für zugängliche Programmierausbildung ·