Асинхронність у JavaScript: Promises, async/await і патерни

Чому розуміти асинхронність важливо

Асинхронність — одна з найважливіших характеристик JavaScript. Вона дозволяє виконувати мережеві запити, читати файли та взаємодіяти з користувацьким інтерфейсом, не блокуючи головний потік. Однак прості конструкції можуть призводити до складних помилок, якщо не розуміти, як працюють Promise, async/await та черги подій.

Основні поняття: Promise та async/await

Promise — об’єкт, що представляє результат асинхронної операції, який може бути у стані pending, fulfilled або rejected. async/await — надбудова над Promise, яка робить асинхронний код більш читабельним.

Приклад синтаксису

function fetchData(url) {
  return fetch(url).then(r => r.json());
}

async function load() {
  try {
    const data = await fetchData('/api/data');
    console.log(data);
  } catch (err) {
    console.error('Помилка:', err);
  }
}

Паралельне vs послідовне виконання

Різниця між паралельним і послідовним запуском асинхронних операцій часто викликає плутанину.

• Послідовне: кожна операція чекає на завершення попередньої. Наприклад, у циклі for…of з await кожна ітерація завершується перед початком наступної.
• Паралельне: запустити всі операції одночасно за допомогою колекції промісів і дочекатися їх усіх через Promise.all або Promise.allSettled.

Поширена помилка

Розробники часто використовують Array.prototype.map з await всередині і очікують паралельного виконання, але якщо ви ставите await у тілі map, виконання все одно може стати послідовним, залежно від структури коду. Кращий підхід — збирати проміси й використовувати Promise.all:

// НЕ паралельно
for (const url of urls) {
  await fetchData(url);
}

// Паралельно
const promises = urls.map(url => fetchData(url));
await Promise.all(promises);

Обробка помилок

Promise та async/await мають свої нюанси в обробці помилок. У async-функції будь-яка невилучена помилка перетворюється на відхилений Promise, тому не забувайте використовувати try/catch або обробляти помилки через .catch().

• Для групи промісів Promise.all припиняє виконання на першій відхиленій операції.
• Якщо потрібно отримати всі результати та помилки, використовуйте Promise.allSettled, який повертає статус для кожного промісу.

Скасування операцій

До появи AbortController скасування промісів було непростим завданням. Тепер багато API (fetch, streams) підтримують AbortController, який дозволяє сигналізувати про відміну операції.

const controller = new AbortController();
fetch('/api/data', { signal: controller.signal })
  .then(r => r.json())
  .catch(err => console.error(err));

// Пізніше
controller.abort();

Для кастомних промісів можна реалізувати власні механізми відміни або використовувати зовнішні бібліотеки з підтримкою таймаутів і токенів.

Мікротаски, макротаски і Event Loop

Щоб правильно передбачити порядок виконання, корисно знати про чергу мікротасків (microtasks) та макротасків (macrotasks). Promise callbacks потрапляють у мікротаски, тому виконуються до багатьох інших подій у циклі подій. Це впливає на порядок виконання async/await і setTimeout.

Поради для практики

• Використовуйте Promise.all для одночасних операцій і Promise.allSettled, якщо потрібні всі результати разом із помилками.
• Не ставте await в колбек map без збору промісів — це часто призводить до непотрібної послідовності.
• Завжди обробляйте відхилені проміси (.catch або try/catch), щоб уникнути unhandledrejection.
• Для скасування мережевих запитів застосовуйте AbortController.
• Якщо працюєте з великим числом одночасних запитів, обмежуйте паралелізм (пул промісів), щоб не перевантажувати сервер або пам’ять.

Висновок

Розуміння механік Promise, async/await та циклу подій допоможе писати ефективніший, надійніший асинхронний код. Правильне використання паралельності, обробки помилок і відміни операцій робить додатки швидшими та стабільнішими. Почніть із простих прикладів, відшліфовуйте патерни, і з часом асинхронність стане зручною інструментальною частиною вашої розробки.

Comments

comments