角でx秒ごとにhttpリクエストを送信

Question

私はangular2でx秒ごとにhttpコールをリフレッシュしようとしています。

ionViewDidLoad() { 

    let loader = this.LoadingController.create({ 
     'content':'Please Wait' 
    }); 
    loader.present().then(()=>{ 
     this.http.request('http://mywebserver.com/apps/random.php').map(res=> res.json()).subscribe(data=>{ 
     console.log(JSON.stringify(data)); 
     loader.dismiss(); 
     this.fact = data; 
     },err=>{ 
     loader.dismiss(); 
     let alert = this.alertCtrl.create({ 
      title: 'Error!', 
      subTitle: 'Please check your Internet Connectivity', 
      buttons: ['OK'] 
     }); 
     alert.present(); 
    }) 
    }) 

    } 

ページが新しく読み込まれるとデータが取得されます。しかし、今、私の問題は、

Answer 1

使用Observable.interval新しいデータごとにx秒を取得するためにHTTP呼び出しをリフレッシュされます。

import {Observable} from 'rxjs/Rx'; 
... 
constructor(...) { 
    Observable.interval(30000).subscribe(x => { // will execute every 30 seconds 
    this.ionViewDidLoad(); 
    }); 
} 

たり、ionViewDidLoad関数内：

Observable.interval(3000) 
      .timeInterval() 
      .flatMap(() => this.http.request('http://mywebserver.com/apps/random.php') 
      .map(res=> res.json()) 
      .subscribe(data=>{ 
       console.log(JSON.stringify(data)); 
       loader.dismiss(); 
       this.fact = data; 
      }); 

編集あなたのコメントに答えるために。 Rxjsドキュメントから：

時間間隔オペレータが観測源の 連続排出との間の経過時間の量の指示を発すること 観測に観測源を変換します。この新しいObservableの最初の放出 は、Observableにサブスクライブしたオブザーバの時刻である と、Observableソースが最初のアイテムを発行した時刻 の間に経過した時間を示します。 Observableソースの最後の放出とそれに続く onCompletedへの呼び出しとの間に経過した時間をマークする に対応する放出はありません。デフォルトで

時間間隔がタイムアウトScheduler上で動作するだけでなく、 あなたは、パラメータとして、それ を渡すことによって、スケジューラを指定することができますバリアントを持っています。

この場合、基本的には、JavaScriptのネイティブsetInterval()機能のリアクティブ/ Rxjs方法です。

Answer 2

私はあなたのHTTP要求を行うために別のサービスを作成します。

@Injectable() 
export class RandomService { 
    constructor(http: HttpClient) { } 

    getRandom() { 
    return this.http.get('http://mywebserver.com/apps/random.php'); 
    } 
} 

今、あなたは、単にsetIntervalの内側randomService.getRandom()を呼び出すことができますが、あなたはまた、処理するために（例えばObservable.intervalがある）観察可能な操作を使用することができますこのionViewDidLoadであなたのために：

async function ionViewDidLoad() { 
    let loader = this.LoadingController.create({ 
    content: 'Please Wait', 
    }); 
    await loader.present(); 

    // x number of seconds 
    this.interval$ = interval(x).pipe(
    // make first request right away; otherwise we have to wait x seconds before first one 
    startWith(), 

    // cancel previous request if it had not finished yet 
    switchMap(() => 
     // catch the error inside to allow for a retry each time 
     // you could also use `.catch` on the entire observable stream which will 
     // cancel it if there's an error. 
     this.randomService.getRandom().catch(err => { 
     console.error(err); 
     this.alertCtrl 
      .create({ 
      title: 'Error!', 
      subTitle: 'Please check your Internet Connectivity', 
      buttons: ['OK'], 
      }) 
      .present(); 
     }), 
    ), 
); 

    this.interval$.subscribe(data => this.fact = data); 

    // Separate observable to dismiss loader on first emission 
    this.interval$.pipe(first()).subscribe(() => loader.dismiss()); 
} 

ionViewWillUnload() { 
    this.interval$.unsubscribe(); 
} 

注：これは仮定RxJS 5.5を使用するとHttpClientとの角度です。あなたはこれらを持っていないかもしれませんが、あなたはまだ非常に似たようなことをすることができます。あなたはlettable演算子でパイプすることができないでしょう。もしあなたがHttpClientを使用していないのであれば、私はこのサービスでやる.map(data => data.json())をやる必要があります。

最後に、可能であれば、this.interval$のように、保存したり手動でサブスクライブしないようにしてください。代わりにthis.fact$ = interval(x)...のようなことをする可能性があります。テンプレートで*ngFor="let fact of (fact$ | async)"を行うことができ、手動で登録を解除する必要はありません。