Чим відрізняється Observable від Promise?

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

Що це і навіщо Observable (RxJS) – послідовність, що може надсилати нуль або більше значень у майбутньому. Promise – об’єкт, що представляє однократне асинхронне завершення.

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

• Observable: lazy, multicast (можна підписатися кілька разів), підтримує оператори (map, filter, takeUntil тощо).
• Promise: eager, single‑value, не можна анулювати.

Як це працює Observable створюється через new Observable(subscriber => { … }). Підписник отримує значення через next, помилку через error і завершення через complete. Promise створюється через new Promise((resolve, reject) => { … }) і виконує один раз.

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

// Observable
import { interval } from 'rxjs';
const sub = interval(1000).pipe(take(5)).subscribe(v => console.log(v));

// Promise
fetch('/api').then(res => res.json()).then(data => console.log(data));

Тестування

• Для Observable використовують marble testing (Jest + rxjs-marbles).
• Для Promise – звичайні async/await тести.

Особливості в контексті JS Core Observable дозволяє обробляти потокові дані (WebSocket, UI‑події), Promise – для одноразових запитів.

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

• Не підписуйтеся без unsubscribe у компоненті, інакше утримуєте пам’ять.
• Promise не можна анулювати; для цього потрібен AbortController.

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

1. Використання await observable – не працює.
2. Не обробляти помилки у Observable (catchError).
3. Підписка без unsubscribe → memory leak.
4. Promise‑chain без catch → неперехоплені помилки.
5. Виклик next після complete – не має ефекту.
6. Підписка на Observable, що створюється в компоненті, без takeUntil → утримання.
7. Promise‑об’єкт створюється в циклі без await → багатократні запити.
8. Використання new Observable() замість фабричних функцій (from, of).