每個可觀察值調用RxJS平面地圖函數只有一次

Question

我有一個簡單的RxJS流處理某些輸入，啓動Ajax請求並處理該請求的結果的問題。

一個簡單的例子再現該問題：（每可觀察到的值調用fakeRequest兩次）

var requestCalled = 0; 
 

 
function fakeRequest(value) { 
 
    return new Promise(function(resolve) { 
 
    requestCalled++; 
 
    document.write("<p>"+requestCalled+" ("+value+")</p>"); 
 
    }); 
 
} 
 

 
var stream = Rx.Observable.interval(3000) 
 
    .debounce(500) 
 
    .distinctUntilChanged() 
 
    .flatMapLatest(fakeRequest); 
 

 
stream.subscribe(() => {}); 
 
stream.subscribe(() => {});

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.all.min.js"></script>

結果

1 (0) 
2 (0) 
3 (1) 
4 (1) 

預期的結果（呼叫fakeRequest僅一次）

1 (0) 
2 (1) 

所以我希望函數fakeRequest在RxJS Observable中每個值只調用一次。但是，當我添加多個訂閱者時，對於每個訂閱者，請求都會啓動。

是否有另一種方法可以替代flatMapLatest，以便每個Observable值只能啓動一個請求？

Answer 1

您可以嘗試使用.share

var requestCalled = 0; 
 

 
function fakeRequest(value) { 
 
    return new Promise(function(resolve) { 
 
    requestCalled++; 
 
    document.write("<p>"+requestCalled+" ("+value+")</p>"); 
 
    }); 
 
} 
 

 
var stream = Rx.Observable.interval(3000) 
 
    .debounce(500) 
 
    .distinctUntilChanged() 
 
    .flatMapLatest(fakeRequest) 
 
    .share(); 
 

 
stream.subscribe(() => {}); 
 
stream.subscribe(() => {});

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.all.min.js"></script>