Promises und await

Manche Dinge brauchen eine Weile, bis sie ein Ergebnis liefern: Ein Server schickt Daten, eine Pizzeria backt eine Pizza. JavaScript hält dafür nicht an und wartet: Die Seite würde einfrieren, und in der Zwischenzeit würde kein Button funktionieren. Stattdessen gibt eine solche Funktion sofort ein Promise zurück: ein Objekt, das verspricht, dir später einen Wert zu geben. Es ist wie der Pager, den du bei der Bestellung an einem Imbissstand bekommst: Du bekommst ihn sofort, und das Essen kommt später.

Oben in script.js steht eine fertige Funktion bestellePizza(). Sie tut so, als wäre sie eine Pizzeria: Sie gibt ein Promise zurück, und eine Sekunde später bekommt das Promise seinen Wert, einen Text wie "Deine Pizza Margherita ist fertig!". In der Funktion erzeugt new Promise(...) das Promise, und resolve(...) gibt ihm seinen Wert. Solche Funktionen musst du nicht selbst schreiben: In der nächsten Lektion kommen Promises von der Funktion fetch() des Browsers.

Wenn du das Ergebnis so verwendest, wie es ist, bekommst du das Promise, nicht die Pizza:

const pizza = bestellePizza("Margherita");
console.log(pizza); // Gibt aus: Promise {}

Um den Wert zu bekommen, warte mit await darauf:

bestellenButton.addEventListener("click", async function () {
    const pizza = await bestellePizza("Margherita");
    meldung.textContent = pizza;
});

await wartet, bis das Promise seinen Wert hat, und gibt ihn dir dann. Du darfst es nur in einer Funktion verwenden, die mit async markiert ist, das du vor das Wort function schreibst. Ohne async läuft das Skript überhaupt nicht, und die Konsole zeigt SyntaxError: await is only valid in async functions and the top level bodies of modules.

Während die Funktion wartet, wartet der Rest der Seite nicht: Buttons funktionieren, und Timer laufen weiter. Nur diese eine Funktion pausiert bei await und macht weiter, sobald der Wert da ist.

In fremdem Code siehst du auch .then(): bestellePizza("Margherita").then(function (pizza) { ... }). Es tut dasselbe wie await, nur anders geschrieben. In diesem Kurs verwenden wir await, das sich von oben nach unten liest.