web-dev-qa-db-ja.com

オブザーバブルを取得してすぐにデータを返し、その後5秒ごとにデータを返す方法

Webapiからデータを返すObservableを作成したい。データをすぐに返し、10秒ごとにAPIをポーリングしたいです。以下のコードは、「interval」メソッドを使用していることを示しています。ただし、これにより、最初のデータセットが10秒遅延します。最初のデータフラッシュを最初の遅延なしでダウンさせるにはどうすればよいですか？

export class EventService {
    public events$: Observable<Event[]>;
    private _eventsObserver: Observer<Event[]>;
    private pollInterval: number = 5000;

    private _dataStore: {
        events: Event[];
    };

    constructor(private http: Http) {
        this._dataStore = { events: [] };

        this.events$ = new Observable(observer => this._eventsObserver = observer)
            .startWith(this._dataStore.events)
            .share();
    }

    pollEvents() {
        return Observable.interval(10000)
            .switchMap(() => {
                return this.http.get('app/resources/data/scheduleevents.json')
                    .map((responseData) => {
                        return responseData.json();
                    });
            })
            .map((events: Array<any>) => {
                let result: Array<Event> = [];
                if (events["data"]) {
                    events["data"].forEach((event) => {
                        result.Push(event);
                    });
                }
                return result;
            });
    }
}
rxjsrxjs5
37
FeeFiFoFum

とった：

        .interval(5000)
        .startWith(0);
75
FeeFiFoFum

タイマーを使用します。 timerが必要なものだと思います（RxJSタブを参照）： http://reactivex.io/documentation/operators/timer.html#collapseRxJS

次のように使用できます：

Observable.timer(0, 5000).flatMap(() => apiCall())

どこ0-最初の値を出力するまでの遅延、5000-5秒ごとに値を出力します

enter image description here

20
Alendorff
_    let timer = TimerObservable.create(0, 5000);
    this.sub = timer.subscribe(t => {
        this.yourMethod()
    });
_

購読を解除するにはthis.sub.unsubscribe()を実行します

3
Yossi Neiman
Observable.interval(5L, TimeUnit.SECONDS)
        .startWith(0)
        .observeOn(AndroidSchedulers.mainThread())
        .map { foobar() }

私にとってはうまくいきます。ありがとう

0
SebLu

以下のangualr2については、アプリケーションで記述したコードであり、期待どおりに機能しています-

稼働中-

import { Observable } from 'rxjs/Observable';
import 'rxjs/Rx';

getList(): Observable<IVM> {
    return Observable.interval(5000).startWith(0)
          .switchMap(() => 
             this._http.get(this._vmURL )
                 .map((response: Response) => <IVM>response.json().data)
                 .do(data => console.log('All: ' + JSON.stringify(data)))
                .catch(this.handleError)
             );
}

コンポーネント内-

private getInstanceDetails(): void {
    this._vmDataService.getList()
        .subscribe(vmList => {
           //Do whatever you want with the vmList here :) 
        },
        error => this.errorMessage = <any>error);
}

ありがとう、あなたの考えを教えてください。

0
Ganesh Prakash Mahajan

私は個人的にstartWithでintervalを使用します（必要RxJs 6 +）。ここに完全な例を示します：

   history: any;
   historySubscription: Subscription;

   constructor(private jobService: JobService) { }

   ngOnInit() {

      this.historySubscription = interval(10000).pipe(
         startWith(0),
         flatMap(() => this.jobService.getHistory())
      ).subscribe(data => {
         this.history = data;
      });

   }

   ngOnDestroy() {
      this.historySubscription.unsubscribe();
   }

これにより、initで履歴が取得され、10秒ごとに履歴が取得されます。

別の代替方法は、@ Alendorffで説明されているようにtimerを使用することです。

0
Curse