Оператор switchMap
switchMap
- это оператор высшего порядка (Higher-Order Observable) в RxJS, который используется для преобразования элементов одного потока данных (Observable) в другой поток данных. Он применяет функцию к каждому элементу и возвращает новый Observable, отменяя предыдущие внутренние Observable, если новый элемент приходит.
Давайте разберемся с примером кода и объясним каждую деталь:
import { of, interval } from 'rxjs';
import { switchMap, take } from 'rxjs/operators';
// Исходный поток данных
const source$ = interval(1000).pipe(take(3));
// Функция-преобразователь, принимающая элементы и возвращающая внутренний Observable
const transform = (value: number) => {
// Создаем внутренний Observable с таймером
const inner$ = interval(500).pipe(take(3));
return inner$;
};
// Применяем switchMap для каждого элемента и отменяем предыдущий внутренний Observable, если новый элемент приходит
const result$ = source$.pipe(
switchMap(transform)
);
// Подписываемся на результат
result$.subscribe(result => console.log(result));
В этом примере у нас есть исходный поток данных source$
, который эмитит значения каждую секунду (0, 1, 2) и завершается после трех значений. Затем у нас есть функция-преобразователь transform
, которая принимает каждый элемент исходного потока и возвращает внутренний Observable inner$
, содержащий значения, эмитимые каждые 500 миллисекунд (0, 1, 2) и завершающийся после трех значений.
С помощью оператора switchMap
мы применяем функцию-преобразователь к каждому элементу исходного потока. Если новое значение приходит, пока предыдущий внутренний Observable все еще активен, switchMap
отменяет предыдущий внутренний Observable и подписывается на новый внутренний Observable.
Результат подписки на result$
выводится в консоль: 0, 1, 2, 0, 1, 2.
В данном случае, когда первое значение 0 из исходного потока приходит, switchMap
применяет функцию-преобразователь transform
, которая создает внутренний Observable inner$
. Этот внутренний Observable эмитит значения 0, 1, 2 каждые 500 миллисекунд. Однако, перед тем как эмитить следующее значение 1 из исходного потока, switchMap
отменяет предыдущий внутренний Observable и подписывается на новый внутренний Observable. Таким образом, мы получаем значения 0, 1, 2, 0, 1, 2 в результате подписки на result$
.