Skip to main content

await в обробнику події

JavaScriptJunior~1 хв читання
Запропонувати правку

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> <script> const btn = document.querySelector('#load'); const result = document.querySelector('#result'); 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, а помилки були оброблені.

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

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

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

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