RxJS 运算符执行顺序

Question

考虑到我有以下代码：

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

直到我就 postAction$ 主题调用 .next() 之前，第一个 console.log('fired') 从未被调用。

RxJS 算子的执行上下文是什么？它们是如何工作的？我本以为第一个 exhaust map 需要发出一个值，然后其他运算符才运行。在 rxjs docs

中找不到任何内容

演示 stackblitz

Answer 1

我认为找到答案的最好方法是实际查看幕后发生的事情（我还没有这样做，但我希望将来这样做）。

到那时，我是这样看的。

将溪流视为河流。
船穿过河流，基本上是排放值。
还有bridges，你可以把它们想象成operators。每座桥可能需要 一些条件 来决定哪条船可以继续前进，哪条不能。

这是我想象的样子：

            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

RxJS 运算符执行顺序

RxJS operators execution order

rxjs

angular

rxjs-pipeable-operators