Если вы работали с Angular, вы, вероятно, сталкивались с RxJS. Наблюдаемые объекты, служебные конструкции, множество аргументов метода канала, и каждый аргумент возвращается отдельной функцией с разным количеством аргументов. Есть интуитивно понятные функции, такие как filter или map. Первый явно фильтрует значения в наблюдаемом, а второй изменяет эти значения. Такие функции называются операторами. И чем глубже вы погружаетесь в RxJS, тем больше разных операторов вы изучаете. И, в конце концов, вы доберетесь до наблюдаемых наблюдаемых — наблюдаемых более высокого порядка. Для работы с такими потоками существуют специальные операторы — операторы высшего порядка (HOO). Они могут сгладить наблюдаемые или, другими словами, сделать их нормальными.
В этой статье я покажу вам, что в HOO нет ничего мифического, и расскажу, в каких случаях нужно использовать операторов высшего порядка. Сейчас вы подумаете, что это скучный лонгрид, но не торопитесь. Мы рассмотрим всего 4 оператора: switchMap, exhaustMap, concatMap и mergeMap.
переключательКарта
switchMap на сегодняшний день является самым популярным из всех. Но почему? По одной простой причине — этот оператор избавляется от состояния гонки.
Давайте изучим код:
const searchInput = document.getElementById('search-input');
const search$ = fromEvent(searchInput, 'input').pipe(
map(event => event.target.value)
);
search$.subscribe((query) => {
http.get('/search', {params: {query}}).subcribe((result) => {
console.log(result);
})
})В этом коде мы находим ввод, с которым взаимодействует пользователь, и подписываемся на событие input. То есть search$ observable выдает строки. Внутри подписки мы видим, что для каждой испускаемой строки на сервер отправляется запрос, а ответ службы выводится на консоль.
В этом коде вы можете увидеть как минимум две проблемы:
- Состояние гонки. Обычно при поиске чего-либо пользователю важно видеть результат именно последнего запроса. Но такой код не дает нам гарантии, что последние данные, выведенные на консоль, соответствуют последней строке, выведенной в наблюдаемом объекте
search$. - Подписаться в подписке и не отписываться. Существует отличное эмпирическое правило, которое может сэкономить вам…
