RxJS-101: операции сопоставления более высокого порядка (concat-map, merge-map, switch-map, выхлопная-карта)

Вступление

HTTP-запросы всегда выполняются асинхронными вызовами. В старых проектах мы использовали вызовы Ajax для выполнения HTTP-запроса с помощью Promises. В настоящее время RxJS предоставляет нам различные преимущества. Один из RxJS называется наблюдаемым. Мы можем вызывать наши HTTP-запросы (get, put, post), подписавшись на один наблюдаемый объект для получения ответа.

Как видно из рисунка выше, мы можем вызывать наблюдаемые объекты так же просто, как этот код, но когда нам нужно объединить несколько наблюдаемых, на помощь приходят более высокие наблюдаемые функции. Наблюдаемая более высокого порядка определяется как наблюдаемая, использующая результат другой наблюдаемой. В этой статье мы обсудим использование комбинации наблюдаемых с помощью операторов высшего порядка, таких как concatMap, mergeMap, switchMap и выхлопная карта. Каждая из этих функций удовлетворяет разные ответы на вопросы. Давайте обсудим, как эти функции получают выходы и результаты, анализируя их.

В чем заключается проблема?

Мы можем использовать и манипулировать кодом, когда мы используем наблюдаемые объекты. Например, мы можем получить результат HTTP-ответа, используя объект HttpClient, который возвращает наблюдаемый объект, подписавшись на него, но что нам делать? когда нам нужно использовать результат подписки наблюдаемого объекта в качестве параметра нового наблюдаемого?

Является ли ответ использования вызовом другого наблюдаемого метода в подписке, подобным этому?

Это создает проблему, препятствующую шаблону для нашей программы, которая может привести нас к некоторым проблемам. (Это обсуждение в другой день).

Пример проекта

В нашем примере проекта мы будем описывать каждую функцию как события нажатия четырех кнопок.

Функция кнопки будет представлять функцию сопоставления, выполняющую API для получения элемента из службы. В приложении следующий номер свойства id начинается с 0. Каждый раз, когда мы нажимаем одну из кнопок, функция карты отправляет следующий идентификатор и получает новый элемент из HTTP-ответа с заданным случайным временем задержки для имитации реального примера API. В результате мы будем записывать элемент результата на консоль, чтобы увидеть результат выполнения для анализа вывода.

Как мы тестируем функции?

Мы протестируем наши функции, щелкая каждую кнопку 5 раз с мы можем видеть различие функций.

ConcatMap

Карта Concat используется для сопоставления значений с внутренним наблюдаемым, подписки и отправки в порядке ¹.

Когда мы хотим выполнить наблюдаемые объекты по порядку, мы должны использовать функцию concatMap. Прежде всего, он вызывает внутренний наблюдаемый результат метода для внешнего наблюдаемого, а внешний наблюдаемый использует результат внутреннего наблюдаемого функции карты.

Когда мы используем функцию concat, мы столкнемся с результатом, показанным на изображениях выше. id следует за в порядке возрастания, как то, как определение concatmap сообщает, какое бы время задержки оно ни было, оно будет ждать завершения следующего выполнения. Результаты запроса показывают, что следующий запрос не запускается, пока не завершится предыдущее задание. В результате пятикратного нажатия кнопки ответ возвращается по порядку, и следующие результаты ждут, пока предыдущий наблюдаемый не завершит свою работу.

MergeMap

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

Как мы можем видеть результат на изображениях выше, вызовы карты слияния и асинхронное выполнение наблюдаемых объектов. Это дало нам результат быстрее, но требует последовательного выполнения.

SwitchMap

SwitchMap отправляет предыдущие наблюдаемые объекты при появлении нового наблюдаемого, поэтому предыдущее выполнение наблюдаемого не будет выполнено. Когда отмена происходит на предыдущем наблюдаемом, switchmap автоматически отменяет подписку на предыдущее выполнение и создает новую подписку. Вы можете использовать switchmap, когда вам нужно обрабатывать только последнее выполнение наблюдаемого.

Как мы можем видеть результат на изображениях выше. Мы взяли результат только последнего выполнения наблюдаемого и распечатали его. Остальные результаты показаны серым цветом (отменены).

ExhaustMap

Сопоставить с внутренним наблюдаемым, игнорировать другие значения до тех пор, пока этот наблюдаемый объект не достигнет ².

Если вы хотите игнорировать весь запрос до завершения предыдущего запущенного запроса, вам необходимо использовать функцию выхлопной карты. Другие не запущенные запросы не будут запускать наблюдаемые объекты, поэтому, когда вы делаете HTTP-запрос в наблюдаемом объекте, выхлопная карта не создает новую подписку на наблюдаемый объект. Это дает преимущество в отсутствии необходимости создания новых HTTP-запросов к серверу и экономит вам полосу пропускания.

Как видно из приведенного выше результата, выхлопная карта отменяет следующие выполнения до тех пор, пока не будет завершено первое выполнение. В этом случае мы не выполняем функцию карты, поэтому никаких запросов не будет.

Заключение

В этой статье мы рассмотрели использование и результаты четырех функций отображения высокого порядка (concatMap, mergeMap, switchMap, выхлопная карта), и все функции имеют свое поведение и ответы на свои уникальные специфические вопросы:

concatMap: какую функцию мы должны использовать, когда нам нужно выполнить наблюдаемые по порядку?
mergeMap: Какую функцию мы должны использовать для асинхронного выполнения наблюдаемых объектов без каких-либо правил?
switchMap: какую функцию мы должны использовать, чтобы получить только последний результат выполнения?
выхлопная карта: какую функцию мы должны использовать, если нам нужно игнорировать следующие результаты до завершения предыдущего выполнения?

Stackblitz: https://stackblitz.com/edit/angular-rxjs-101-high-order-mapping-functions

GitHub: https://github.com/Jerolivine/angular-rxjs-101-high-order-map-functions