RxJS 等到 promise 解决答案

【问题标题】：RxJS wait until promise resolvedRxJS 等到 promise 解决
【发布时间】：2016-05-11 21:50:19
【问题描述】：

我仍在研究响应式编程，所以我很确定这是非常基础的，但流转换的数量对于初学者来说是相当多的。

我正在从 DOM 事件创建一个 Observable。此事件应反过来触发 REST 调用，并且所有其他 DOM 事件将被忽略，直到此事件得到解决。

const stream = Observable.fromEvent(document, 'some-event')
stream
  .flatMap(() => httpRestService())
  .subscribe(() => {
  })

在最后一个 HTTP 承诺解决之前，如何忽略流中的事件？

DOM event
A - - - - B - - - - C
HTTP event
D ...........done - C

【问题讨论】：

首先，观察者不发出值，它接收值。所以在这里你的观察者是一个可观察的。那我不知道你说的“忽略”是什么意思。这些事件是否丢失或排队？介绍问题的最佳方式是指定输入和预期输出。最好用大理石图来完成
@user3743222 已更新
也许skipUntil 会是您想要的？ reactivex.io/documentation/operators/skipuntil.html
我会咬人的——为什么你要忽略所有的 DOM 事件，直到最后一个 HTTP 承诺得到解决？是因为您不想在最后一个解决之前触发额外的 HTTP 调用吗？如果是这种情况，您是否可以禁用输入/显示微调器/其他任何阻止 DOM 事件首先发生的方法？否则，我同意@Stephen - skipUntil 可能最接近你想要的。
还有pausablegithub.com/Reactive-Extensions/RxJS/blob/master/doc/…

标签： javascript reactive-programming rxjs

【解决方案1】：

您可以尝试flatMapFirst，这似乎可以满足您的需求。以下代码可以工作（jsfiddle here - 单击任意位置）：

const stream = Observable.fromEvent(document, 'some-event')
stream
  .flatMapFirst(() => httpRestService())
  .subscribe(() => {
  })

引用文档：

flatMapFirst 操作符类似于上面描述的 flatMap 和 concatMap 方法，但是，不是发射操作符通过转换源 Observable 中的项目而生成的所有 Observable 发射的所有项目，flatMapFirst 而是传播第一个 Observable只在它开始订阅下一个 Observable 之前完成。 在当前 Observable 完成之前出现的 Observable 将被丢弃并且不会传播。

更新

查看源代码 (https://github.com/Reactive-Extensions/RxJS/blob/master/src/core/linq/observable/switchfirst.js) 似乎当前的 observable 尚未完成，同时所有传入的 observable 都将被丢弃，即未订阅。

因此，如果订阅这些 observable 触发了 http 调用（看看httpRestService 的代码会很有趣），那么就没有不必要的 http 调用了。如果这些调用是通过调用函数立即触发的，并且结果通过 observable 传递，那么这些调用有可能确实被不必要地触发了。在这种情况下，使用defer 运算符仅在订阅时进行http 调用很容易解决该问题。简而言之，如果您还没有其余请求，则需要延迟执行它。

【讨论】：

我很高兴知道提议的解决方案有什么问题，因为我发现它被否决了。
这是完美的。谢谢！
你确定这是给你想要的吗？除非我弄错了，否则这仍会为每个文档事件调用 httpRestService 调用，它只会丢弃所有结果，直到上一个调用返回为止。
更准确地说，当当前的 observable 还没有完成时，在此期间所有传入的 observable 都将被丢弃，即不订阅。所以如果订阅这些 observables 触发了 http 调用，那么就没有不必要的 http 调用了。如果这些调用是通过调用函数立即触发的，并且只是通过可观察对象传递的结果，那么这些调用可能确实被不必要地触发了。在这种情况下，使用 defer 运算符仅在订阅时进行 http 调用很容易解决该问题。
感谢您的澄清！运行您的示例代码后，我感觉是这种情况，但您的解释非常清楚。