检查 rxjs observable 是否完整答案

【问题标题】：checking if rxjs observable is complete检查 rxjs observable 是否完整
【发布时间】：2016-06-12 11:05:04
【问题描述】：

我有一个类，在实例化时会进行一些 Web 服务调用，伪代码如下：

Rx.Observable.fromPromise(jQuery.getJSON('https://api.github.com/users'))
 .flatMap(function () {
   return Rx.Observable.fromPromise(jQuery.getJSON('https://api.github.com/users'));  
 });

同一个类正在监听 onclick 事件。

当这个事件被触发时，如果原始网络服务调用完成：做某事

如果它们不完成，请等待它们完成，然后再做某事。

我想知道如何使用 rxjs 方法来实现这一点？而不是设置变量和使用 if 语句。

【问题讨论】：

您能否指定预期行为的大理石图？这里有大理石图的例子； rxmarbles.com。这基本上是在时间线上呈现输入和预期输出。

标签： rxjs rxjs5

【解决方案1】：

我将其称为异步门。这些实际上用 Rx 很容易做到。您将需要缓存 Web 服务调用可观察序列。然后在基于这些完成的其他调用中，您只需 flatMap 关闭他们的结果。由于这些来自 Promises，我相信结果会保留给后期订阅者，但如果不是，那么您只需要 replay(1) 序列。

所以在伪代码中

var startUpData = Rx.Observable.fromPromise(jQuery.getJSON('https://api.github.com/users'))
 .flatMap(function () {
   return Rx.Observable.fromPromise(jQuery.getJSON('https://api.github.com/users'));  
 });

var events = Rx.Observable....//Your event wired up here.

//When an event
events
    .flatMap(function(evt){ 
        //Wait until the startUpData yeilds, but pass on the evt data instead.
        return startUpData.map(function(){ return evt;})
//do something here knowing that your event has fired, but the web services have also completed.
    .subscribe();

您可以在该视频的大约 51 分钟处看到 Matt Barrett 在该视频中解释异步门 - https://youtu.be/Tp5mRlHwZ7M?t=51m30s

您可能还需要考虑 switch 运算符，以防您不希望重叠事件

【讨论】：

【解决方案2】：

我相信 withLatestFrom 或 combineLatest 会满足您的要求。

根据您是否希望只允许使用服务提供的数据单击按钮一次，您可以使用withLatestFrom。如果您希望使用服务之前提供的数据继续点击按钮，您可以使用combineLatest

const futureEvent$ = Rx.Observable.timer(3000);
const btnClick$ = Rx.Observable
  .fromEvent(document.querySelector('button'), 'click');
const futureAndBtnClick$ = futureEvent$.combineLatest(btnClick$);

futureAndBtnClick$.subscribe(x => console.log('click + future stuff happened'));

jsbin example

【讨论】：