如何使用Angular 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");
                  });

UPDATE基於Mark建議的.expand()

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

我想你想要每隔幾秒就要一次服務器。 你能這樣試試嗎？

確保你從'rxjs / Rx'導入導入{Observable}如果你不導入它我們得到可觀察到的錯誤有時候會發現錯誤

工作plnkr 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
        });
  }
}

看谷歌檢查控制台，你將每5秒獲得一次新數據

Answer 2

您的.expand是.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 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
    });