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

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

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

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

Контент

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

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

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

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

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

## 1. Базове правило

`await` можна використовувати **тільки всередині функції, оголошеної з** `async`.
Це означає, що якщо обробник події - звичайна функція, `await` усередині неї викличе помилку:

```javascript
button.addEventListener('click', () => {
  await fetch('/api/data'); // SyntaxError
});
```

Щоб це працювало, потрібно оголосити обробник як `async`:

```javascript
button.addEventListener('click', async () => {
  const response = await fetch('/api/data');
  const data = await response.json();
  console.log(data);
});
```

Тепер усе законно - браузер зачекає `fetch` усередині обробника,
але *сама подія не "заморожує" UI*: решта коду продовжує виконуватися.

---

## 2. Приклад використання `await` в обробнику

```javascript
<button id="load">Завантажити дані</button>
<div id="result"></div>

btn.addEventListener('click', async () => {
    result.textContent = 'Завантаження...';

try {
      const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');
      const post = await res.json();
      result.textContent = post.title;
    } catch (err) {
      result.textContent = 'Помилка завантаження';
    }
  });
</script>
```

Що відбувається:

- при кліку запускається `async`-обробник;
- `await fetch(...)` призупиняє виконання *всередині функції*;
- після завантаження дані відображаються;
- при цьому інтерфейс не блокується (JS залишається асинхронним).

---

## 3. Можна також оголосити окрему `async`-функцію

Іноді зручніше винести логіку окремо:

```javascript
async function handleClick() {
  const data = await fetchData();
  render(data);
}

button.addEventListener('click', handleClick);
```

Працює точнісінько так само.

---

## 4. Важливо пам'ятати

- Обробники подій **не чекають** результату `await`.
Тобто `addEventListener` не знає, що всередині обробника є `await`.
Код поза обробником продовжить виконуватися одразу після виклику.
- Помилки всередині `async`-обробника **потрібно ловити через** `try/catch`,
інакше вони підуть у `Promise` і можуть залишитися непоміченими:

```javascript
  btn.addEventListener('click', async () => {
    try {
      await riskyOperation();
    } catch (e) {
      console.error('Помилка:', e);
    }
  });
  ```
- `event.preventDefault()` і `stopPropagation()` працюють **одразу**,
незалежно від `await` - їх можна викликати до асинхронних операцій.

---

## Підсумок

| Питання | Відповідь |
|---|---|
| Чи можна використовувати `await` в обробнику? | Так, якщо він `async` |
| Чи можна оголосити `await` без `async`? | Ні |
| Чи блокує це інтерфейс? | Ні |
| Чи потрібно ловити помилки? | Так, через `try/catch` |
| Чи можна виносити `async`-функцію окремо? | Так, кращий стиль |

---

> **Запам'ятай просто:**
> `await` усередині обробника - це нормально,
> головне, щоб обробник був `async`,
> а помилки були оброблені.

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

Для рев’юера

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

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