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

в 12:41, , рубрики: angular, javascript, rxjs, TypeScript

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://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js