async/await

Слово async перед функцией делает ровно одну вещь: заворачивает её результат в промис. Вернули строку — снаружи придёт промис со строкой. Бросили ошибку — придёт промис в состоянии «отклонён». Ничего другого async сам по себе не меняет: тело функции по-прежнему выполняется сразу и синхронно, пока не встретит await.

async function getName() {
  return "Аня";
}
console.log(getName());
getName().then((name) => console.log(name));

Отсюда простое правило: вызов async-функции нельзя присвоить переменной и сразу использовать как значение. Его либо ждут через await, либо разворачивают через .then() — как любой другой промис.

async function f() {
  return Promise.resolve(42);
}
f().then((v) => console.log(v));

await ставит на паузу только ту функцию, в которой написан. Движок запоминает, где остановился, отпускает управление наружу и возвращается сюда, когда промис выполнится. Страница при этом живая: кнопки нажимаются, анимации крутятся, остальной код идёт дальше.

const delay = (ms, v) => new Promise((r) => setTimeout(() => r(v), ms));
async function main() {
  console.log("старт");
  const x = await delay(100, 5);
  console.log(x);
}
main();
console.log("хвост");

Порядок вывода здесь — «старт», «хвост», «5». Строчка после main() выполняется, пока функция ждёт свою задержку. Именно это отличает await от воображаемой «заморозки браузера»: замирает одна функция, а не вкладка.

await живёт внутри async-функции. На верхнем уровне он работает только в модулях (type="module"), в обычном скрипте это синтаксическая ошибка.

Отклонённый промис, который вы ждёте через await, превращается в обычное исключение. Значит, и ловится оно обычным способом — try..catch, тем же самым, что и ошибка в синхронном коде. Отдельный .catch() больше не нужен, а finally работает как всегда.

const fail = () => Promise.reject(new Error("сервер молчит"));
(async () => {
  try {
    await fail();
  } catch (err) {
    console.log("поймали:", err.message);
  }
})();

Большой плюс: один try накрывает сколько угодно последовательных await — не нужно вешать обработчик на каждый шаг. Если же ошибку ловить негде, её просто не перехватывают: она уедет наружу и станет отклонением того промиса, который вернула ваша async-функция.

const boom = async () => { throw new Error("бум"); };
(async () => {
  try {
    boom();
  } catch (e) { console.log("не сработает"); }
  console.log("выполнится");
})();

await в цикле выглядит так естественно, что ошибку замечают уже по секундомеру. Каждая итерация честно дожидается предыдущей, и три независимых запроса по 300 мс складываются в 900 мс вместо 300.

const delay = (ms, v) => new Promise((r) => setTimeout(() => r(v), ms));
(async () => {
  const t = Date.now();
  const out = [];
  for (const id of [1, 2, 3]) out.push(await delay(300, id * 10));
  console.log(out);
  console.log(Date.now() - t >= 900);
})();

Лечится тем, что промисы создают все сразу, а ждут один раз. map запускает операции, Promise.all отдаёт массив результатов в исходном порядке — и общее время равно времени самой медленной операции, а не их сумме.

const delay = (ms, v) => new Promise((r) => setTimeout(() => r(v), ms));
(async () => {
  const t = Date.now();
  const out = await Promise.all([1, 2, 3].map((id) => delay(300, id * 10)));
  console.log(out);
  console.log(Date.now() - t < 600);
})();

Последовательность нужна только тогда, когда следующий шаг зависит от предыдущего (получили пользователя — теперь знаем его id) или когда сервер просит не бомбить его параллельными запросами. Во всех остальных случаях await внутри цикла — это потерянное время.

Цепочка .then() прекрасно справляется с одним шагом, но плохо переносит ветвления и промежуточные значения. Каждый результат живёт в своём колбэке, и чтобы использовать данные первого шага на третьем, приходится тащить их через замыкания или возвращать «пакеты» из нескольких значений.

const delay = (ms, v) => new Promise((r) => setTimeout(() => r(v), ms));
const getUser = (id) => delay(50, { id, city: "Дубай" });
const getWeather = (city) => delay(50, city + ": +38");
getUser(7)
  .then((user) => getWeather(user.city))
  .then((w) => console.log(w));

const delay = (ms, v) => new Promise((r) => setTimeout(() => r(v), ms));
const getUser = (id) => delay(50, { id, city: "Дубай" });
const getWeather = (city) => delay(50, city + ": +38");
(async () => {
  const user = await getUser(7);
  console.log(await getWeather(user.city));
})();

Во втором варианте user — обычная переменная, видимая до конца функции. Дальше можно писать if, for, ранний return — весь привычный синтаксис языка, который в колбэках работал криво.