角度2でrxjsを使用して間隔で非同期を要求する方法

Question

rxjsを使用してhttp要求で間隔を設定したいとします。リクエストが完了してからn秒後にサーバー上のデータを送信する必要があります。

Observable.interval(10000) 
        .?(() => { 
         //request for server. return Observable 
         return this.getData(); 
        }) 
        .subscribe(() => { 
         console.log("Request done. After 10 second will be next request"); 
        }); 

マーク

ngOnInit() { 
    this.getData() 
    .expand(() => Rx.Observable.timer(10 * 1000) 
     .concatMap(() => this.getData()) 
    ) 
    .subscribe(data => { 
     console.log('received new data', data); 
    }); 
} 

private getData() { 
    return Observable.timer(5000) 
    .do(() => console.log("timer")); 
} 

Answer 1

あなたのユースケースは、再帰的に新しい値を実行して返すことができ.expandオペレータのための優れたケースです。何が起こっているのかを明確にするために、タイムスタンプ+デバッグログをたくさん追加したこのスニペットを見てください。

function getData() { 
 
    // simulate remote call which can take some time 
 
    return Rx.Observable.of('') 
 
    .timestamp() 
 
    .do(i => console.log(`[debug] Going to fetch data from server @${i.timestamp}`)) 
 
    .map(i => 'the new JSON blob of data to use') // this would be your actual http.get call 
 
    .delay(1500) 
 
    .timestamp() 
 
    .do(i => console.log(`[debug] Data retreived from server @${i.timestamp}`)); 
 
} 
 

 
getData() 
 
    .expand(_ => Rx.Observable.of('') // we need something to delay upon 
 
    .timestamp() 
 
    .do(i => console.log(`[debug] Waiting 1sec for next getData ${i.timestamp}`)) 
 
    .delay(1000) 
 
    .concatMap(() => getData()) 
 
) 
 
    .take(5) 
 
    .subscribe(val => console.log(`New data received @${val.timestamp} : ${val.value}`))

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.3/Rx.js"></script>

ので、最初にあなたはgetData()に加入し、次のgetData()を取得する前の時間のために再帰的にdelayにその値を展開します。このアプローチには主題は関係しておらず、あなたのサブスクリプションは新しい値を受け取るために利用可能なままです。

Answer 2

によって提案.expand()に基づくUPDATE私はあなたが何かを数秒ごとにサーバーを依頼したいと思います。あなたは

は時々

http://plnkr.co/edit/vMvnQW?p=preview

import {Component} from '@angular/core'; 
import {Http} from '@angular/http'; 
import 'rxjs/Rx'; 
import {Observable} from 'rxjs/Rx'; 

@Component({ 
    selector: 'app', 
    template: ` 
     <b>Angular 2 HTTP request every 5 sec RxJs Observables!</b> 
     <ul> 
     <li *ngFor="let doctor of doctors">{{doctor.name}}</li> 
     </ul> 

     ` 
}) 

export class MyApp { 
    private doctors = []; 

    constructor(http: Http) { 
    Observable.interval(5000) 
    .switchMap(() => http.get('http://jsonplaceholder.typicode.com/users/')).map((data) => data.json()) 
     .subscribe((data) => { 
      this.doctors=data; 
      console.log(data);// see console you get output every 5 sec 
     }); 
    } 
} 

plnkr作業あなたがそれをインポートしない場合は、我々が観測可能見つからないエラーを取得し、あなたが「rxjs/Rxの」からインポート{観察可能}をインポートしていることを確認してください。この方法を試すことができます

google inspect consoleを参照してください。新しいデータが5秒ごとに表示されます。

Answer 3

削除した回答のコメントを読んだことがあります。リクエストを送信したい場合は、応答を受信して​​から10秒後に別のリクエストを送信します。

かなり複雑だ

、なんとか...私はこのような何かが動作するはずだと思う：

ここ

let responseSubject = new Rx.BehaviourSubject({}); 
responseSubject 
    .delay(10000) 
    .flatMap(() => { 
     return http.get(...) 
    }) 
    .subscribe((res) => { 
     responseSubject.onNext({}); 
     // Your stuff here 
    }); 

私はフィードバックできるよう、私たちは応答を得るとき、私は行動を設定しています。その後、要求を10秒後に要求を行い、応答を生成するストリームを設定します。

編集：私は何かが不足しています...最初のリクエストは開始する前に10秒かかります。そして、私のように書き換えます：

let responseSubject = new Rx.ReplaySubject(1); 
responseSubject 
    .delay(10000) 
    .startWith({}) 
    .flatMap(() => { 
     return http.get(...) 
    }) 
    .subscribe((res) => { 
     responseSubject.onNext({}); 
     // Your stuff here 
    });