Страхотно разширение за библиотека rxjs — async-await-rx

В обикновения rxjs имаме много оператори и можем да извършваме едни и същи действия по различни начини.

Често извършваме повтарящи се действия като извличане на данни паралелно, един по един и т.н. и всеки път трябва да го изграждаме с много оператори. Това разширение може да опрости кода, като въведе само няколко оператора за повтарящи се действия. Благодарение на това разширение кодът е по-ясен и можем да се съсредоточим върху действието, което трябва да направим, а не кой оператор да изберем.

Това разширение може да бъде полезно, когато:

• имате нужда от данни от всяко действие,
• искате да извиквате действия паралелно или едно по едно и искате да изчакате резултата — awaitAll,
• искате да дефинирате динамични действия — asyncPipeFrom
• искате да пропуснете действие в зависимост от условието

Вижте пример в Stackblitz

Сравнение с обикновен rxjs

• код с разширение async-await-rx

asyncPipe(
  awaitAction(() => action1()),
  awaitAll(() => [action2_1(), action2_2(), action2_3(), action2_4()]),
  awaitAction(() => action3()),
  action((value, index, [_, items]) =>
    console.log({ value, items /* data[1] */ }) // { 'action3', ['action2_1', 'action2_2', 'action2_3', 'action2_4']}
  ),
  awaitAction((value) => action4(value))
)
  .pipe(
    takeUntil(cancel$),
    finalize(() => (isLoading = false))
  )
  // Async pipe return value from last action and data from each action. It is array.
  // we can use destructurization for example: [value, [action1Val, action2Val, action3Val]]
  // first item is value from last action and the second is data from all actions
  .subscribe(([value, [val1, val2, val3]]) => {
    console.log(val1); // Display value from 1st action
    console.log(val2); // Display items from 2nd action
    console.log(val3); // Display items from 3rd action
  });

• код без разширение (в обикновен rxjs)

action1()
  .pipe(
    switchMap((data) =>
      combineLatest([action2_1(), action2_2(), action2_3(), action2_4()]).pipe(
        map((items) => [data, items])
      )
    ),
    switchMap((data) => action3().pipe(map((value) => [...data, value]))),
    tap(([_, items, value]) => console.log({ value, items })),
    switchMap((data) =>
      action4(data[2]).pipe(map((value) => [...data, value]))
    ),
    takeUntil(cancel$),
    finalize(() => (isLoading = false))
  )
  .subscribe(([val1, val2, val3]) => {
    console.log(val1); // Display value from 1st action
    console.log(val2); // Display items from 2nd action
    console.log(val3); // Display items from 3rd action
  });

Можете да намерите повече подробности за това разширение тук