web-dev-qa-db-de.com

Angular 6-Run-Methode wird alle 10 Sekunden gewartet

Ich habe diesen Dienst, der HttpClient verwendet, um Daten zu erhalten:

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

Die Komponente in der Fußzeile nenne ich und zeige das Ergebnis:

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

Das funktioniert, aber ich muss diese Methode alle 10 Sekunden ausführen, damit sie auf dem neuesten Stand ist.

Wie kann ich das machen?

4
Paul B

Verwenden Sie rxjs timer, um die API-Anforderung beim Start und dann alle 10 Sekunden aufzurufen.

Dies lässt sich am besten erreichen, indem Sie rxjs zum Teilen und Erobern verwenden.

Importieren Sie zunächst Folgendes: 

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

Fügen Sie dann die Eigenschaft hinzu, um die Anforderung an die API zu bearbeiten:

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

Fügen Sie als Nächstes die Eigenschaft hinzu, um das Timing zu handhaben:

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'))
);

Als letztes den Kill-Befehl auslösen, wenn die Komponente getötet wird:

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

Hier ist eine StackBlitz Demo .

5
Faisal

Versuchen Sie es mit timer von RxJS:

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();
}

interval(10000) von RxJS ist nicht geeignet, da es NUR nach 10 Sekunden und nicht sofort zum ersten Mal Werte emittiert (und ich denke, das ist nicht das, wonach Sie suchen). 

timer(0, 10000) gibt jedoch sofort (0) und alle 10 Sekunden (10000) bis zur Abmeldung Werte aus.

4
Adrien SAULNIER

In Ihrer checkData-Methode können Sie Folgendes tun:

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}`))
        );
}

Dann erhält Ihr Abonnent alle 10 Sekunden das Ergebnis des http-Anrufs.

0
Marc Harry

Die Methode von rxj, dies zu tun, wäre die folgende.

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

const timeInterval$ = interval(10000);

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

Hoffe, das wird dir helfen 

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