Що таке Promise?

Повне пояснення

Що це і навіщо

Promise — це абстракція над асинхронними операціями, що дозволяє працювати з результатами у вигляді future value. Замість колбеків Promise дає послідовний, ланцюговий підхід.

Ключові принципи

• Статуси: pending, fulfilled (resolve) і rejected (reject).
• Методи: then(onFulfilled, onRejected), catch(onRejected), finally(onFinally).
• Композиція: Promise.all, Promise.race, Promise.allSettled.

Як це працює

1. Конструктор приймає executor‑функцію (resolve, reject) => { … }.
2. Внутрішній event loop виконує executor синхронно.
3. Після виконання resolve(value) або reject(error) Promise переходить у відповідний стан.
4. Підписані callback‑и виконуються асинхронно через microtask queue.

Практика і реалізація

// JavaScript
const fetchData = () => new Promise((resolve, reject) => {
  setTimeout(() => resolve('data'), 1000);
});

fetchData().then(console.log).catch(console.error);

// TypeScript – типізація результату
const fetchNumber = (): Promise<number> => new Promise((res) => res(42));

Тестування (Jest)

test('Promise resolves', async () => {
  const result = await fetchData();
  expect(result).toBe('data');
});

Оптимізація та edge‑cases

• Не забувайте про unhandled rejection – використовуйте catch або глобальний обробник.
• Для паралельних запитів застосовуйте Promise.all і обробляйте окремі помилки через .catch у кожному промісі.
• У випадку Promise.race, перший завершений проміс визначає результат, інші «зникають».

Часті помилки

1. Відсутність return у ланцюжку then → пропущений результат.
2. Внутрішня помилка в executor без reject → Promise залишається pending.
3. Перевантаження стеку через рекурсивні then без асинхронного відкладення.
4. Необроблені Promise.allSettled → помилки не виділяються.
5. Використання await у синхронній функції без async → синтаксична помилка.
6. Заміна new Promise на async function без потреби → зайва обгортка.
7. Перевантаження setTimeout у промісі → блокування event loop.
8. Неочікуваний this у колбеку – використовуйте arrow functions.

Cheatsheet

• new Promise((res, rej) => { … })
• .then(onFulfilled).catch(onRejected)
• Promise.all([p1, p2])
• await promise – синхронізує асинхронний код.

Follow‑up питання

• Як обробляти помилки у Promise.all?
• Чому async/await є синтаксичним шкіркою над Promise?
• Які переваги Promise.allSettled перед Promise.all?