Що станеться, якщо не поставити await?

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

Ключова ідея

Якщо не поставити await, то замість результату ти отримаєш сам Promise - обіцянку, яка колись виконається, але ще не виконана.

Без await ти не "дочікуєшся" результату, а просто створюєш проміс і йдеш далі.

Приклад 1 - без `await` повертається проміс

javascript

async function getData() {
  return 'Дані';
}

async function main() {
  const result = getData(); // без await
  console.log(result);
}

main();

Вивід:

javascript

Promise { 'Дані' }

Чому:

getData() - async-функція, вона завжди повертає проміс;
без await ти отримуєш об'єкт Promise, а не 'Дані'.

Приклад 2 - з `await`

javascript

async function main() {
  const result = await getData(); // дочекалися
  console.log(result);
}

main();

Вивід:

javascript

Дані

await "розгортає" проміс, повертаючи його значення.

Приклад 3 - не поставили `await`, і код пішов далі

javascript

async function delay() {
  await new Promise(res => setTimeout(res, 2000));
  console.log('Виконано через 2 сек');
}

async function run() {
  delay(); // не чекаємо!
  console.log('Продовжуємо далі');
}

run();

Вивід:

javascript

Продовжуємо далі
Виконано через 2 сек

Без await виконання не призупиняється - функція delay() запущена у фоні, а програма йде далі.

Приклад 4 - через відсутність `await` результат не той

javascript

async function fetchUser() {
  return { name: 'Alex' };
}

async function showUser() {
  const user = fetchUser(); // забули await
  console.log('Ім\'я користувача:', user.name);
}

showUser();

Вивід:

javascript

Ім'я користувача: undefined

Тому що user - це не об'єкт, а Promise, у якого немає поля name. Тобто помилка логіки, а не синтаксису.

Приклад 5 - коли `await` спеціально не ставлять (паралельні задачі)

Іноді не ставити await - це правильно, якщо ти хочеш запустити операції паралельно:

javascript

async function load() {
  const userPromise = fetch('/api/user');
  const postsPromise = fetch('/api/posts');

  // чекаємо обидва паралельно
  const [user, posts] = await Promise.all([userPromise, postsPromise]);

  console.log('Обидві відповіді отримано');
}

Якби ти поставив await одразу після кожного fetch, вони виконувалися б по черзі, а не одночасно.

Приклад 6 - без `await` при поверненні

javascript

async function foo() {
  return await Promise.resolve('OK');
}

await тут надлишковий - можна просто:

javascript

async function foo() {
  return Promise.resolve('OK');
}

Тому що async-функція все одно обгортає результат у проміс.

Під капотом (що реально відбувається)

Коли ти викликаєш async-функцію:

javascript

const p = myAsyncFunction();

JavaScript негайно повертає об'єкт Promise, а сам код усередині починає виконуватися асинхронно. Якщо ти не поставиш await, цей проміс просто залишиться "в повітрі", і результат його виконання ти ніколи не використаєш.

Поширені проблеми без `await`

Помилка	Що відбувається
Забули `await` при виклику async-функції	У змінній опиняється `Promise`, а не результат
Повернення без `await` усередині іншої async	Може повернути "незавершений" проміс
Неузгодженість даних	Код йде далі, поки проміс ще не виконався
Помилки не ловляться	`try...catch` не спіймає `reject`, якщо не `await`-нули

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

Уяви, що await - це "почекати замовлення"

З await: ти стоїш біля стійки, чекаєш кави і отримуєш чашку.

Без await: ти просто зробив замовлення і пішов далі - каву приготують, але ти її не взяв.

ПІДСУМОК

Сценарій	Що станеться
Не поставив `await`	Функція поверне `Promise`, виконання продовжиться одразу
Поставив `await`	Виконання призупиниться, поки проміс не завершиться
Помилка без `await`	`try...catch` не спіймає - проміс не "дочекалися"
Коли не ставити `await`	При запуску паралельних задач (`Promise.all`)

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

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

Premium

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