web-dev-qa-db-ja.com

Angular 6-runメソッドは10秒ごとにサービスされます

HttpClientを使用してデータを取得するこのサービスがあります。

checkData() {
    return this.http.get('my url');
}

フッターコンポーネント上で呼び出して、結果を表示します。

ngOnInit() {
    this.myservice.checkdata().subscribe( result => { this.statustext = result } );
}

これは機能しますが、このメソッドを10秒ごとに実行する必要があるため、最新の状態になります。

これどうやってするの？

angulartypescriptrxjsangular6
7
Paul B

rxjsタイマーを使用して、起動時にAPI要求を呼び出し、その後10秒ごとに呼び出します。

これは、rxjsを使用して分割して征服することで最もよく達成されます。

まず、以下をインポートします。

import { timer, Observable, Subject } from 'rxjs';
import { switchMap, takeUntil, catchError } from 'rxjs/operators';

次に、APIへのリクエストを処理するプロパティを追加します。

private fetchData$: Observable<string> = this.myservice.checkdata();

次に、タイミングを処理するプロパティを追加します。

private refreshInterval$: Observable<string> = timer(0, 1000)
.pipe(
  // This kills the request if the user closes the component 
  takeUntil(this.killTrigger),
  // switchMap cancels the last request, if no response have been received since last tick
  switchMap(() => this.fetchData$),
  // catchError handles http throws 
  catchError(error => of('Error'))
);

最後に、コンポーネントが強制終了された場合に強制終了コマンドを実行します。

ngOnDestroy(){
  this.killTrigger.next();
}

StackBlitz Demo です。

9
Faisal

RxJSのtimerで試してください：

_import { Subscription, timer, pipe } from 'rjxs';
import { switchMap } from 'rxjs/operators';

subscription: Subscription;
statusText: string;

ngOnInit() {
    this.subscription = timer(0, 10000).pipe(
      switchMap(() => this.myservice.checkdata())
    ).subscribe(result => this.statustext = result);
}

ngOnDestroy() {
    this.subscription.unsubscribe();
}
_

RxJSからのinterval(10000)は適切ではありません。10秒後にのみ値を出力し始め、すぐにではありません（そして、私はそれがあなたが探しているものではないと思います）。

ただし、timer(0, 10000)は、値を即時に（0）、サブスクリプションが解除されるまで10秒（10000）ごとに出力します。

13
Adrien SAULNIER

CheckDataメソッドでは、次のようなことができます。

import { timer, of } from 'rxjs';
import { switchMap, catchError } from 'rxjs/operators';

checkData() {
    return timer(0, 10000)
        .pipe(
           switchMap(_ => this.http.get('my url')),
           catchError(error => of(`Bad request: ${error}`))
        );
}

その後、サブスクライブは10秒ごとにhttp呼び出しの結果を取得します。

1
Marc Harry

これを行うrxjsの方法は次のとおりです。

import { interval } from 'rxjs/observable/interval';
import { map } from 'rxjs/operators';

const timeInterval$ = interval(10000);

timeInterval$.pipe(
  map( () => this.http.get(//some url);
);
1
Mike Tung

このような非常に簡単な方法を使用できます

ngOnInit() {
this.doMonitoring();
}

doMonitoring() {
 setTimeout(() => {
  console.log('do some action!');
  //better to have one if here for exiting loop!
  this.doMonitoring();
 }, 1500);
}
0
B.Habibzadeh

私はangular 8：

タイマーと間隔の違いに注意してください。

単一の関数呼び出しを遅延させたい場合はタイマーを使用しますが、次の間隔で複数の関数呼び出しを順番に実行したい場合は反転を使用します： http://tutorials.jenkov.com/ angularjs/timeout-interval.html

このブログ投稿では、次のコードが抜粋されています。 http://tutorials.jenkov.com/angularjs/timeout-interval.html

ngOnInit() {
    interval(5000)
      .pipe(
        startWith(0),
        switchMap(() => this.apiService.getTweets())
      )
      .subscribe(res => this.statuses = res.statuses})
    ;
  }
0
Bolic

これがあなたを助けることを願っています

export class YourComponent implements OnInit, OnDestroy {
  private alive: boolean;

  constructor(){}

  ngOnInit(){
    this.alive = true;
    TimerObservable.create(0, 10000)
      .pipe(
        takeWhile(() => this.alive)
      )
      .subscribe(() => {
        this.myservice.checkdata().subscribe( result => { this.statustext = result } );
      });
  }

  ngOnDestroy(){
    this.alive = false;
  }
}
0
Nikson