Звичайні оператори RxJS в Angular

Оператори RxJS в Angular

Оператори RxJS трансформують, фільтрують та комбінують потоки Observable. Знання ключових операторів є важливим для розробки в Angular.

Оператори трансформації

map — Трансформувати кожне значення

typescript

this.http.get<ApiResponse>('/api/users').pipe(
  map(response => response.data) // Витягти дані з відповіді
);

switchMap — Перемикання на новий Observable (скасовує попередній)

typescript

// Пошук з автоматичним скасуванням попереднього запиту
this.searchControl.valueChanges.pipe(
  debounceTime(300),
  switchMap(query => this.http.get(\`/api/search?q=\${query}\`))
);

mergeMap — Перемикання на новий Observable (паралельно)

typescript

// Обробка елементів паралельно
from(userIds).pipe(
  mergeMap(id => this.userService.getUser(id))
);

concatMap — Перемикання на новий Observable (послідовно)

typescript

// Обробка по одному, у порядку
from(items).pipe(
  concatMap(item => this.apiService.save(item))
);

Оператори фільтрації

filter

typescript

this.route.paramMap.pipe(
  map(params => params.get('id')),
  filter((id): id is string => id !== null)
);

debounceTime — Чекати на паузу

typescript

this.searchInput.valueChanges.pipe(
  debounceTime(300), // Чекати 300мс після останнього натискання клавіші
  distinctUntilChanged(), // Випускати лише якщо значення змінилося
  switchMap(query => this.search(query))
);

distinctUntilChanged

typescript

this.store.select('count').pipe(
  distinctUntilChanged() // Випускати лише коли значення дійсно змінюється
);

take / takeUntil

typescript

// Взяти перші N значень
this.http.get('/api/config').pipe(take(1));

// Шаблон для відписки
private destroy$ = new Subject<void>();

ngOnInit() {
  this.someObservable$.pipe(
    takeUntil(this.destroy$)
  ).subscribe(/* ... */);
}

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

Оператори комбінації

combineLatest

typescript

// Комбінувати кілька потоків — випускає, коли будь-яке джерело випускає
combineLatest([
  this.userService.getUser(id),
  this.orderService.getOrders(id),
  this.settingsService.getSettings()
]).pipe(
  map(([user, orders, settings]) => ({ user, orders, settings }))
);

forkJoin

typescript

// Чекати, поки всі завершаться — як Promise.all
forkJoin({
  users: this.http.get<User[]>('/api/users'),
  products: this.http.get<Product[]>('/api/products'),
  config: this.http.get<Config>('/api/config'),
}).subscribe(({ users, products, config }) => {
  // Всі три завершилися
});

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

catchError / retry

typescript

this.http.get('/api/data').pipe(
  retry(3), // Спробувати до 3 разів
  catchError(error => {
    this.errorService.handle(error);
    return of([]); // Повернути запасне значення
  })
);

Оператор	Призначення	Коли використовувати
`map`	Трансформувати значення	Завжди
`switchMap`	Перемикання + скасування попереднього	Пошук, зміни маршруту
`mergeMap`	Перемикання + запуск паралельно	Паралельні API виклики
`concatMap`	Перемикання + запуск послідовно	Упорядковані збереження
`filter`	Пропустити небажані значення	Умовна обробка
`debounceTime`	Чекати на паузу	Введення пошуку
`distinctUntilChanged`	Пропустити дублікати	Зміни форми
`takeUntil`	Авто-відписка	Очищення компонента
`combineLatest`	Комбінувати останні значення	Кілька джерел даних
`forkJoin`	Чекати, поки всі завершаться	Паралельні запити
`catchError`	Обробка помилок	Відновлення після помилок

Оволодійте switchMap (скасовує попередній — ідеально для пошуку), takeUntil (чистий шаблон відписки) та combineLatest/forkJoin (паралельне завантаження даних). Використовуйте debounceTime + distinctUntilChanged + switchMap для пошуку з попереднім переглядом. Завжди обробляйте помилки за допомогою catchError.

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

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

Premium

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

Дочитали статтю?

Практика завдань