Как связать BehaviorSubject с HTTP-запросом через switchMap?

Связывание BehaviorSubject с HTTP-запросом через switchMap

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

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

Когда пользователь вводит текст в поле поиска, BehaviorSubject эмитирует новое значение. switchMap принимает это значение, создает HTTP-запрос и подписывается на него. Если пользователь вводит следующий символ до завершения предыдущего запроса, switchMap отменяет предыдущий запрос и создает новый. Это предотвращает состояние гонки и избыточные запросы.

Пример кода

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

class SearchService {
  private searchSubject = new BehaviorSubject<string>('');
  search$ = this.searchSubject.pipe(
    debounceTime(300),
    distinctUntilChanged(),
    switchMap(query => this.http.get(`/api/search?q=${query}`))
  );

  updateSearch(query: string) {
    this.searchSubject.next(query);
  }
}

Применение

• Поиск с автодополнением
• Обновление данных при изменении фильтров
• Загрузка данных по мере ввода текста

Вывод

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