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

在我致电.next()主题上的postAction$之前，永远不会调用第一个console.log('fired')。

RxJS运算符的执行上下文是什么？它们如何工作？我本来希望在运行其他运算符之前，第一个排气图需要发出一个值。在rxjs docs

中找不到任何内容

在stackblitz上的演示

Answer 1

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

直到那时，这就是我的看法。

将流视为河流。
这条河被船穿过，基本上是排放值。
还有桥接器，您可以将它们视为操作员。每座桥梁可能需要一些条件，以便确定哪条船可以继续前进，而哪条船不能继续前进。

这是我如何可视化它：

            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运算符执行顺序

1 个答案: