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

Что такое switchMap?

Оператор switchMap — это один из операторов трансформации в RxJS, который принимает каждый элемент из исходного Observable и возвращает новый Observable. Ключевая особенность switchMap заключается в том, что при поступлении нового значения он отписывается от предыдущего внутреннего Observable и подписывается на новый. Это позволяет отменять незавершённые асинхронные операции, такие как HTTP-запросы или таймеры.

Когда используется switchMap?

Наиболее частый сценарий — это обработка пользовательского ввода в реальном времени, например, в поле поиска с автодополнением. Каждый раз, когда пользователь вводит символ, отправляется запрос на сервер. Если пользователь продолжает печатать, предыдущий запрос становится неактуальным, и его нужно отменить. switchMap идеально подходит для этого, так как он автоматически отменяет предыдущий запрос и запускает новый.

Пример кода

import { fromEvent } from 'rxjs';
import { switchMap, debounceTime, distinctUntilChanged } from 'rxjs/operators';

const searchInput = document.getElementById('search');
const search$ = fromEvent(searchInput, 'input').pipe(
  debounceTime(300),
  distinctUntilChanged(),
  switchMap((event) => {
    const query = event.target.value;
    // Возвращаем Observable от HTTP-запроса
    return fetch(`/api/search?q=${query}`).then(res => res.json());
  })
);

search$.subscribe(results => {
  console.log('Результаты поиска:', results);
});

Как это работает?

В примере выше мы используем debounceTime для задержки обработки ввода, distinctUntilChanged для игнорирования повторяющихся значений, а затем switchMap для выполнения запроса. Если пользователь вводит новый символ до завершения предыдущего запроса, switchMap отменяет его и запускает новый. Это предотвращает устаревшие результаты и снижает нагрузку на сервер.

Вывод

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