2016-06-12 88 views
0

我有一個類實例化時,使得一些Web服務調用,下面的僞代碼:如果rxjs觀察到檢查結束

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

同班正在收聽一個onclick事件。

當這甚至被觸發,如果原來的Web服務調用完成:做一些

如果他們不完整,等待他們去完成,做某件事之前。

我想知道如何用rxjs方法實現這一點?而不是設置變量並使用if語句。

+1

能否請您指定預期的行爲的一個大理石圖?這裏的大理石圖的例子; rxmarbles.com。這基本上是在時間線上呈現投入和預期產出。 – user3743222

回答

0

我將這稱爲異步門。 這些對於Rx來說確實很容易。 您需要緩存Web服務調用可觀察序列。 然後在其他調用中,這些調用完成後,您只需要flatMap即可。 由於這些都是來自Promises,我相信結果會保留給後期用戶,但如果不是,那麼您只需要replay(1)這些序列。

在psudeo代碼

所以

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分鐘解釋該視頻的異步門 - https://youtu.be/Tp5mRlHwZ7M?t=51m30s

您可能還需要櫃面考慮switch操作你不想重疊事件

0

我相信withLatestFromcombineLatest會做你在問什麼。

根據您是否希望僅允許使用服務提供的數據點擊一次按鈕,您可以使用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