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

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

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

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

Контент

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

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

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

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

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

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

> `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`:

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

Тому `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)`) |

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

Для рев’юера

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

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