Множественные запросы к API с помощью mergeMap и forkJoin вместо subscribe

Моя цель - предложение широкого ассортимента товаров и услуг на постоянно высоком качестве обслуживания по самым выгодным ценам.
image

Руководство по использованию mergeMap и forkJoin вместо простых подписок для множественных запросов к API.

В этой статье я покажу два подхода к обработке множественных запросов в Angular с использованием mergeMap и forkJoin.

Содержание:


  1. Проблема
  2. subscribe
  3. mergeMap
  4. forkJoin
  5. Комбинируем mergeMap и forkJoin
  6. Сравнение subscribe с mergeMap и forkJoin

Проблема


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

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

Я покажу вам простое приложение, где нам потребуется сделать 3 запроса к тестовому API (https://jsonplaceholder.typicode.com):

  1. Авторизуемся и запрашиваем информацию о пользователе
  2. На основе информации о пользователе получим список постов пользователя
  3. На основе информации о пользователе получим список альбомов, созданных пользователем

subscribe – обычный способ обрабатывать запросы в Angular, но есть более эффективные методы. Сначала мы решим задачу с использованием subscribe, а затем улучшим решение при помощи mergeMap и forkJoin.

subscribe


Довольно простой способ. Делаем первый запрос к API. Затем, во вложенной подписке, чтобы можно было использовать первый ответ, делаем еще два запроса к API.

image

mergeMap


Этот оператор лучше всего использовать когда нам нужно вручную контролировать порядок запросов.

Итак, когда мы используем mergeMap?
Когда результат первого запроса к API нам нужен для того, чтобы сделать следующий.

image

Посмотрите на пример, мы видим, что для второго запроса нужен userId из ответа первого вызова.

Обратите внимание:

  1. flatMap – алиас для mergeMap
  2. mergeMap поддерживает несколько активных внутренних подписок одновременно, поэтому можно создать утечку памяти с такими долгоживущими подписками

forkJoin


Этот оператор подойдет, если нам нужно сделать несколько запросов и важен результат каждого. То есть можно сгруппировать несколько запросов, запустить их параллельно и вернуть только один observable.

Итак, когда мы используем forkJoin?

Когда запросы могут выполняться параллельно и не зависеть друг от друга.

image

Комбинируем mergeMap и forkJoin


Обычно в разработке мы сталкиваемся с ситуацией когда нужно сделать несколько запросов которые зависят от результата выполнения какого-то другого запроса. Давайте посмотрим как это можно провернуть с использованием mergeMap и forkJoin.

image

Так мы избежали вложенных подписок и разбили код на несколько небольших методов.

Сравнение обычной подписки с mergeMap и forkJoin


Единственная разница, которую я заметил, это парсинг HTML.

Давайте посмотрим на время, которое занял парсинг при использовании обычной подписки:

image

Теперь посмотрим сколько парсится HTML с использованием mergeMap и forkJoin

image

Я сравнивал результат несколько раз и пришел к выводу, что парсинг с mergeMap и forkJoin всегда быстрее но разница не очень большая (~100ms).
Самое важное – это способ сделать код более понятным и читабельным.

Подводя итог


Мы можем использовать RxJS для обработки множественных запросов в Angular. Это помогает нам писать более читаемый и поддерживаемый код. Ну и в качестве бонуса, мы видим небольшое увеличение производительности, если используем RxJS способы вместо обычных подписок.

Надеюсь, статья была полезна! Подписывайтесь на меня в Medium и Twitter. Не стесняйтесь комментировать и задавать вопросы. Буду рад помочь!

Исходники тут.
Источник: https://habr.com/ru/post/471572/


Интересные статьи

Интересные статьи

Еще в апреле 2020 года Citizenlab сообщил о довольно слабом шифровании Zoom и заявил, что Zoom использует аудиокодек SILK. К сожалению, статья не содержала исходных данных, чтобы эт...
Здравствуйте! Меня зовут Игорь Шамаев, я главный инженер по разработке в команде SmartData. Занимаюсь fullstack-разработкой внутренней аналитической BI-системы. В нашей компании React...
Кодируйте‌ ‌одни‌ ‌и‌ ‌те‌ ‌же‌ ‌данные‌ ‌гораздо‌ ‌меньшим‌ ‌количеством‌ ‌байт.‌ ‌ ‌ Почему‌ ‌меня‌ ‌это‌ ‌должно‌ ‌волновать ‌ ‌ Данные‌ ‌хранятся‌ ‌в‌ ‌памяти‌ ‌в‌ ‌виде‌ ‌с...
Фреймворк Spring Integration умеет отдавать текущее состояние всех EIP-компонентов и их связей в виде JSON-графа. Это кажется очень удобным для изучения и отладки, но увы, ни один и...
Еще раз здравствуйте! До старта занятий в группе по курсу «Разработчик С++» остается меньше недели. В связи с этим мы продолжаем делиться полезным материалом переведенным специально для студентов...