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

Во-первых, что такое стратегия конкатенации?

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

Предположим, что у нас есть текстовое поле, в котором мы можем свободно вводить что угодно, и что при каждом вводе, введенном пользователем, мы отправляем 3 HTTP-запроса на сервер, комбинируя введенную букву с цифрами 1,2 и 3, и так далее. с каждой напечатанной буквой. Другими словами, если пользователь введет «A», клиент отправит три запроса, например:

[ПОЛУЧИТЬ] /конечная точка/A1

[ПОЛУЧИТЬ] /конечная точка/A2

[ПОЛУЧИТЬ] /конечная точка/A3

ПЕРВАЯ СТРАТЕГИЯ: concatMap

Учитывая поток значений (пользователь, который вводит n раз), оператор concatMap ожидает каждой операции, прежде чем инициализировать следующую.

Учитывая наш пример выше, мраморная диаграмма здесь показывает первый поток значений (A, B и C), которые представляют значения, испускаемые пользователем, и потоки 1,2 и 3, которые представляют наше слияние («A1», «A2 " и так далее).

Давайте пошагово:

  • Пользователь вводит A, и первое объединенное значение выдается как [GET]/endpoint/A1, когда запрос разрешается, затем…
  • …клиент запускает [GET]/endpoint/A2, после разрешения …
  • … клиент запускает [GET]/endpoint/A3, после разрешения…
  • …Пользователь вводит B, затем…
  • [GET]/endpoint/B1 запускается, и после разрешения…
  • … [GET]/endpoint/B2 запускается, но…
  • …Тем временем пользователь вводит C, но наш concatMap ставит в очередь C1, C2 и C3 послевыдачи B3, так что…
  • … Запускается [GET]/endpoint/B3, и после разрешения…
  • … [GET]/endpoint/C1 запускается, и после разрешения…
  • … Запускается [GET]/endpoint/C2, и после разрешения…
  • … [GET]/endpoint/C3 начинается

Теперь, даже сместив B намного раньше, результат не изменится, как вы можете видеть на этой отредактированной мраморной диаграмме ниже.

И это почти все!

Я надеюсь, что эта стратегия конкатенации немного понятнее :)