Promise a await

Některé věci chvíli trvají, než dají výsledek: server posílá data, pizzerie peče pizzu. JavaScript na ně nečeká: stránka by zamrzla a mezitím by nefungovalo žádné tlačítko. Taková funkce místo toho hned vrátí objekt Promise (anglicky slib), který slibuje, že hodnotu dostanete později. Je to jako bzučák, který dostanete při objednávce ve stánku s jídlem: bzučák máte hned, jídlo přijde později.

Na začátku script.js je hotová funkce objednejPizzu(). Hraje si na pizzerii: vrátí objekt Promise a za sekundu mu dá hodnotu, text jako "Vaše pizza Margherita je hotová!". Uvnitř funkce new Promise(...) vytvoří objekt Promise a resolve(...) mu dá hodnotu. Takové funkce psát nemusíte: v příští lekci vám objekty Promise bude dávat funkce prohlížeče fetch().

Když výsledek použijete rovnou, dostanete objekt Promise, ne pizzu:

const pizza = objednejPizzu("Margherita");
console.log(pizza); // Vypíše: Promise {}

Na hodnotu je potřeba počkat pomocí await:

tlacitkoObjednat.addEventListener("click", async function () {
    const pizza = await objednejPizzu("Margherita");
    zprava.textContent = pizza;
});

await počká, až Promise dostane hodnotu, a pak vám ji dá. Smíte ho použít jen ve funkci označené async, což se píše před slovo function. Bez async se skript vůbec nespustí a konzole ukáže SyntaxError: await is only valid in async functions and the top level bodies of modules.

Zatímco funkce čeká, zbytek stránky nečeká: tlačítka fungují a časovače běží dál. U await se zastaví jen tahle jedna funkce a pokračuje, jakmile hodnota dorazí.

V cizím kódu uvidíte i .then(): objednejPizzu("Margherita").then(function (pizza) { ... }). Dělá totéž co await, jen se to zapisuje jinak. V tomto kurzu používáme await, který se čte shora dolů.