TGViewer
Катерина | Про Frontend Катерина | Про Frontend @katerina_profrontend · 2.86K subscribers
Post #1543 1.31K
firstValueFrom vs lastValueFrom 🤨

В RxJS мы часто работаем с Observables — потоками данных. Иногда нужно получить одно значение из Observable как Promise, чтобы использовать async/await. Для этого есть firstValueFrom и lastValueFrom.😉

Немного теории:

✔️ firstValueFrom(obs$) — возвращает Promise, который резолвится при первом эмите и автоматически отписывается;

✔️ lastValueFrom(obs$) — возвращает Promise, который резолвится только после завершения Observable и содержит последний эмит до завершения.

👀 Что важно учитывать?

1️⃣ Если поток завершился без эмитов, оба метода reject’ят промис. Чтобы этого избежать, можно передать defaultValue:


await firstValueFrom(obs$, { defaultValue: fallback });
await lastValueFrom(obs$, { defaultValue: fallback });


defaultValue сработает только если поток завершился без эмитов. Он не спасёт от ошибок или от вечного ожидания.


2️⃣ lastValueFrom может никогда не разрешиться на бесконечных потоках (например, interval() без ограничения). Поэтому его можно и нужно защищать (take, takeUntil, timeout и т. п.).

Примеры:


//
const observable$ = of(10, 20, 30);
const result = await firstValueFrom(observable$);

// ограничить количество эмитов
const safe$ = source$.pipe(take(5));
const last = await lastValueFrom(safe$);

// или добавить таймаут
const lastWithTimeout = await lastValueFrom(source$.pipe(timeout({ each: 3000 })), { defaultValue: null });



🤓 Когда и что выбрать?

⏺️ firstValueFrom — когда нужен первый результат (подходит и для бесконечных потоков);

⏺️ lastValueFrom — только если поток гарантированно конечен или вы явно ограничили его/поставили таймаут.

➡️ Если нужна реактивная обработка нескольких значений — не превращайте Observable в Promise; используйте подписки, async-pipe или RxJS-операторы.
  • 🔥 12
  • 👍 8
More from @katerina_profrontend
  1. Feb 22, 2026Когда height: 100% чуть-чуть поломало вёрстку 🙈 Я делала простую сетку: контейнер display…
  2. Feb 20, 2026Разбираемся с Proxy в JavaScript 👨‍🏫 Proxy — посредник между кодом и объектом. Он перехв…
  3. Feb 17, 2026Compression Streams API — нативный gzip/deflate прямо в браузере 🤔 Недавно снова вспомнил…
  4. Feb 9, 2026Почему бизнес-логику не стоит писать в UI-компонентах 🧐 Часто вижу один и тот же паттерн:…
  5. Feb 6, 2026Как неочевидные импорты превращают проект в клубок зависимостей 😨 На бумаге — простое пра…
  6. Feb 2, 2026«Хочу стиль для p в header, но не хочу повышать специфичность» 😎 Иногда самая тривиальная…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →