RxJsで解決する約束を待つ

Question

RxJS v5 betaを使用しているフォームに「タイプで保存」機能を実装しようとしています。

データは、ユーザーがテキストフィールドに入力するときにバックエンドに送信する必要があります。新しいユーザー入力のために新しいイベント（next()）を起動し、HTTPリクエストで投稿するためにRx.Subjectを作成しています。

私は出発点として、この質問を使用しました：RxJS wait until promise resolved

しかし、このポストからの溶液を用いて、バックエンドへの同時リクエストが送信されます。

私の目標は、1つのリクエストのみを送信し、実行中のリクエストが完了するまで次のリクエストを延期することです。要求の完了後、最後の保留中のイベントを発行する必要があります（debounceTimeの場合のように）

exampleの機能は、リンクされたSO質問からのアプローチを使用します。これは、すべての入力値に対する要求を送信します。

workaround関数functionはブロックし、前の要求を待つ「ストリーム」の外に保存された約束を使用しています。これは動作し、最後の入力値に対する要求のみを送信します。しかし、それはRxJsのコンセプトに従わないようで、ハッキリと感じます。

これをRxJSで実現する方法はありますか？

function fakeRequest(value) { 
 
    console.log('start request:', value) 
 
    return new Promise((resolve) => { 
 
    setTimeout(() => resolve(value), 1000); 
 
}); 
 
} 
 

 
function example() { 
 
    let subject = new Rx.Subject(); 
 
    
 
    subject 
 
    .debounceTime(500) 
 
    .switchMap(input => fakeRequest(input)) 
 
    .subscribe(data => console.log(data)) 
 

 
    subject.next('example value 1'); 
 
    subject.next('example value 2'); 
 
    subject.next('example value 3'); 
 
    subject.next('example value 4'); 
 
} 
 

 

 
function workaround() { 
 
    let subject = new Rx.Subject(); 
 

 
    let p = Promise.resolve(); 
 
    subject 
 
    .debounceTime(500) 
 
    .switchMap(input => p.then(() => input)) 
 
    .do(input => p = fakeRequest(input)) 
 
    .subscribe(data => console.log(data)) 
 

 
    subject.next('workaround value 1'); 
 
    subject.next('workaround value 2'); 
 
    subject.next('workaround value 3'); 
 
    subject.next('workaround value 4'); 
 
} 
 

 
example(); 
 
// workaround();

<script src="https://unpkg.com/@reactivex/rxjs@5.0.0-rc.2/dist/global/Rx.js"></script>

Answer 1

あなたはconcat()やconcatMap()演算子を使用し、それらのいずれかを捨てるために、要求を実行しないようにしたい場合。これらは、Observableが完了するまで待ってから次のObservableを続行します。

function fakeRequest(value) { 
    console.log('start request:', value) 
    return new Promise((resolve) => { 
    setTimeout(() => resolve(value), 1000); 
}); 
} 

let subject = new Subject(); 
subject.concatMap(value => Observable.fromPromise(fakeRequest(value))) 
    .subscribe(value => console.log(value)); 

subject.next('example value 1'); 
subject.next('example value 2'); 
subject.next('example value 3'); 
subject.next('example value 4'); 

これは、コンソールに出力します。

start request: example value 1 
example value 1 
start request: example value 2 
example value 2 
start request: example value 3 
example value 3 
start request: example value 4 
example value 4 

はライブデモを参照してください：あなたは値を無視したい場合はhttps://jsbin.com/xaluvi/4/edit?js,console

はその後debounce、throttleまたはauditは、すべての良い選択です。