Порядок выполнения операторов RxJS - PullRequest
Новая
       45

Порядок выполнения операторов RxJS

2 голосов
/ 31 октября 2019

Учитывая, что у меня есть следующий код: 

private readonly postAction$ = new Subject();

postStream$ = this.postAction$.pipe(
    exhaustMap(() => {
      this.count ++;
      console.log('fired')
      return of('my other post');
    }),
    startWith(''),
    exhaustMap(()=> {
      this.count ++;
      console.log('fired first')
      return of('my post' + this.count);
    })
  )

На который я подписываюсь в своем шаблоне, используя async трубу.

Я не ожидал, что это сработает, новывод на консоль: 

> fired first

Пока я не вызову .next() для субъекта postAction$, первый console.log('fired') никогда не вызывается.

Что такое контекст выполнения операторов RxJS? Как они работают? Я ожидал, что первая карта выхлопных газов должна была указать значение до того, как остальные операторы будут запущены. Не удалось найти ничего в rxjs документах

Демо на stackblitz

1 Ответ

3 голосов
/ 31 октября 2019

Я думаю, что лучший способ найти ответ - это посмотреть, что происходит за кулисами (я этого не делал, но надеюсь сделать это в будущем).

До тех пор,вот как я вижу вещи.

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

Вот как я это представляю: 

            The value from `startWith`
                     ↓
~~~~~~~~|~~~~~~~~|~~~B~~~~|~~~~~~~~

        ^        ^        ^
        |        |    `exhaustMap(() => {})`
        |        |
        |   `startWith('B')`
        |
`exhaustMap(() => {})`

Канал async внутренне подписывается (и отписывается) от данной наблюдаемой. Я думаю о подписке как о процессе установки реки и мостов . Лодок пока нет.
Но в этом случае лодка может стартовать со второго моста , что означает, что первому нечего сказать по этому поводу.

Это, если вы расположите мосты следующим образом: 

 postStream$ = this.postAction$.pipe(
    startWith(''),
    exhaustMap(() => {
      this.count ++;
      console.log('fired')
      return of('my other post');
    }),
    exhaustMap(()=> {
      this.count ++;
      console.log('fired first')
      return of('my post' + this.count);
    })
  )

Вы должны увидеть этот вывод в консоли: 

fired
fired first
...