Промисы и await

Некоторым вещам нужно время, прежде чем они дадут результат: сервер присылает данные, пиццерия печёт пиццу. JavaScript не останавливается и не ждёт: страница бы зависла, и ни одна кнопка за это время не работала бы. Вместо этого такая функция сразу возвращает промис (Promise) — объект, который обещает выдать значение позже. Это как пейджер, который вам дают, когда вы заказываете еду в фудкорте: пейджер у вас сразу, а еда приходит потом.

Вверху script.js лежит готовая функция orderPizza(). Она притворяется пиццерией: возвращает промис, и через секунду этот промис получает значение — текст вроде "Ваша пицца «Маргарита» готова!". Внутри функции new Promise(...) создаёт промис, а resolve(...) задаёт его значение. Писать такие функции самим вам не придётся: в следующем уроке промисы будут приходить из браузерной функции fetch().

Если использовать результат как есть, вы получите промис, а не пиццу:

const pizza = orderPizza("Маргарита");
console.log(pizza); // Выведет: Promise {}

Чтобы получить значение, дождитесь его с помощью await:

orderButton.addEventListener("click", async function () {
    const pizza = await orderPizza("Маргарита");
    message.textContent = pizza;
});

await ждёт, пока промис получит значение, а затем отдаёт его вам. Использовать его можно только в функции, помеченной словом async, которое пишется перед словом function. Без async скрипт вообще не запустится, а в консоли появится SyntaxError: await is only valid in async functions and the top level bodies of modules.

Пока функция ждёт, остальная страница не ждёт: кнопки работают, таймеры идут. Только эта одна функция приостанавливается на await и продолжает, когда значение приходит.

В чужом коде вы встретите и .then(): orderPizza("Маргарита").then(function (pizza) { ... }). Он делает то же, что и await, только записан иначе. В этом курсе мы используем await, который читается сверху вниз.