Що робить await?

JavaScriptJunior~2 хв читання

Коротке визначення

await - це оператор, який зупиняє виконання async-функції до того часу, поки проміс не виконається (fulfilled) або не відхилиться (rejected).

Після цього:

якщо проміс виконано успішно, await повертає його результат;

якщо проміс відхилено, await кидає помилку (аналог throw).

Синтаксис

javascript

let result = await promise;

Працює тільки всередині async-функцій (або в top-level await у модулях).

Приклад 1 - очікування проміса

javascript

async function example() {
  console.log('Перед await');
  const result = await Promise.resolve('Готово');
  console.log('Після await:', result);
}

example();

Вивід:

javascript

Перед await
Після await: Готово

await чекає виконання проміса і повертає 'Готово'.

Приклад 2 - помилка через `await`

javascript

async function fail() {
  try {
    const res = await Promise.reject('Помилка!');
  } catch (err) {
    console.error('Спіймали:', err);
  }
}

fail();

Вивід:

javascript

Спіймали: Помилка!

Якщо проміс відхилено, await кидає виняток, тому помилки зручно ловити через try...catch.

Приклад 3 - послідовне виконання

javascript

async function steps() {
  console.log('1');
  await new Promise(res => setTimeout(res, 1000));
  console.log('2');
  await new Promise(res => setTimeout(res, 1000));
  console.log('3');
}

steps();

Вивід:

javascript

1
(через 1 сек)
2
(через 1 сек)
3

Кожен await дочікується виконання попереднього проміса, тому код працює послідовно.

Приклад 4 - паралельне виконання (без await всередині)

javascript

async function parallel() {
  const a = fetch('/api/user');
  const b = fetch('/api/posts');

  // Обидва виконуються одночасно
  const [user, posts] = await Promise.all([a, b]);
  console.log('Обидва запити завершені');
}

Якщо поставити await перед кожним запитом, вони виконаються по черзі, а не паралельно.

Як `await` працює всередині Event Loop

Коли рушій зустрічає await promise:

Зупиняє виконання поточної async-функції.
Реєструє продовження (решту коду) як мікрозавдання.
Звільняє основний потік (інший код може виконуватися).
Коли проміс завершується, мікрозавдання запускає код, що залишився.

Тому await не "блокує" JS, він просто відкладає продовження функції до готовності проміса.

Приклад 5 - "пауза" без блокування

javascript

async function wait() {
  console.log('Початок');
  await new Promise(res => setTimeout(res, 2000));
  console.log('Кінець');
}

wait();
console.log('Цей код виконується, поки триває очікування!');

Вивід:

javascript

Початок
Цей код виконується, поки триває очікування!
(через 2 сек)
Кінець

await не блокує потік, а тільки саму функцію.

Приклад 6 - з не-промісами

Якщо передати звичайне значення, воно одразу обгортається в Promise.resolve():

javascript

async function demo() {
  const result = await 42;
  console.log(result);
}
demo(); // 42

Це потрібно для уніфікації - await завжди працює так, ніби це проміс.

Приклад 7 - вкладені await

javascript

async function inner() {
  return 'Всередині';
}

async function outer() {
  const res = await inner();
  console.log('Результат:', res);
}

outer();

Вивід:

javascript

Результат: Всередині

Оскільки inner() повертає проміс, await просто чекає його завершення.

Проста аналогія

Уяви, що await - це пауза на світлофорі:

Коли загорається червоний (Promise pending), ти чекаєш.
Коли зелений (fulfilled), продовжуєш шлях.
Коли аварія (rejected), виникає помилка, і ти переходиш у catch.

Підсумок

Особливість	Опис
Що робить	Зупиняє `async`-функцію, поки проміс не завершиться
Повертає	Результат `resolve` або кидає помилку при `reject`
Де можна використовувати	Тільки всередині `async`-функцій (або top-level await у модулях)
Не блокує	Решта коду програми продовжує виконуватися
Працює з	Промісами і звичайними значеннями (`Promise.resolve(value)`)

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.