Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що буде, якщо не поставити await». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**Якщо не поставити `await`, то замість результату ви отримаєте сам `Promise`: обіцянку, яка колись виконається, але ще не виконана.** Без `await` ви не «чекаєте» на результат, а просто створюєте проміс і йдете далі.

## Теорія

### TL;DR
- Виклик `async`-функції без `await` повертає `Promise`, а не значення.
- Виконання не призупиняється: код одразу йде далі, а функція працює у фоні.
- Звернення до поля результату (`user.name`) дає `undefined`, це помилка логіки, а не синтаксису.
- `try...catch` не спіймає `reject`, якщо ви не поставили `await`.
- Іноді пропустити `await` правильно: так задачі стартують паралельно, а чекають їх через `Promise.all`.
- `return await promise` у звичайному `return` надлишковий, `async` і так загортає результат.

### Швидкий приклад
```javascript
async function getData() {
  return 'Дані';
}

async function main() {
  const withoutAwait = getData();       // Promise { 'Дані' }
  const withAwait = await getData();    // 'Дані'
  console.log(withoutAwait, withAwait);
}

main();
```

### Без await у змінній опиняється проміс
**Приклад 1, без `await` повертається проміс**

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

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

main();
```

Вивід:

```text
Promise { 'Дані' }
```

Чому:

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

**Приклад 2, з `await`**

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

main();
```

Вивід:

```text
Дані
```

`await` «розгортає» проміс і повертає його значення.

### Код іде далі, не чекаючи
**Приклад 3, не поставили `await`, і код пішов далі**

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

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

run();
```

Вивід:

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

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

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

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

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

showUser();
```

Вивід:

```text
Ім’я користувача: undefined
```

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

### Коли await не ставлять навмисно
**Приклад 5, паралельні задачі.** Іноді **не ставити `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`) |

### Типові помилки
- **Звертатися до полів результату без `await`.** `user.name` на промісі завжди `undefined`, і жодної помилки ви не побачите.
- **Розраховувати на `try...catch` без `await`.** Блок завершиться раніше, ніж проміс відхилиться, і ви отримаєте unhandled rejection.
- **Забувати `await` у `return` всередині `try`.** Помилку спіймає не локальний `catch`, а викликач.
- **Ставити `await` перед кожним незалежним запитом.** Паралельні операції варто запускати без `await` і збирати через `Promise.all`.
- **Вважати, що без `await` функція не запускається.** Вона запускається одразу, просто ніхто не чекає на її результат.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати784 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.