Какие основные операторы RxJS вы используете и для каких задач?

Основные операторы RxJS и их применение

RxJS предоставляет мощные операторы для работы с асинхронными потоками данных (Observable). Они позволяют трансформировать, фильтровать, комбинировать и обрабатывать ошибки в потоках, что особенно полезно в Angular и React для управления событиями, HTTP-запросами и состояниями.

Популярные операторы

• map — преобразует каждое значение потока, например, извлекает поле из объекта.
• filter — пропускает только значения, удовлетворяющие условию.
• switchMap — отменяет предыдущий внутренний Observable при новом значении, идеален для поиска.
• mergeMap — параллельно обрабатывает все внутренние Observable, подходит для независимых запросов.
• catchError — перехватывает ошибки и возвращает запасной Observable.
• debounceTime — задерживает emit, пока не пройдет пауза, полезен для инпутов.

Пример кода

import { fromEvent, of } from 'rxjs';
import { map, filter, debounceTime, switchMap, catchError } from 'rxjs/operators';

const input = document.getElementById('search');
const search$ = fromEvent(input, 'input').pipe(
  map(event => event.target.value),
  filter(value => value.length > 2),
  debounceTime(300),
  switchMap(query => fetch(`/api/search?q=${query}`).then(res => res.json())),
  catchError(err => of({ error: err.message }))
);

search$.subscribe(data => console.log(data));

Вывод

Операторы RxJS незаменимы для реактивного программирования, упрощая управление сложными асинхронными сценариями, такими как автодополнение, обработка кликов или последовательные запросы. Их использование повышает читаемость и надежность кода.