web-dev-qa-db-fra.com

Méthode angulaire à 6 cycles: service toutes les 10 secondes

J'ai ce service en utilisant HttpClient pour obtenir des données:

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

Le composant sur le pied de page que je l'appelle et affiche le résultat:

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

Cela fonctionne, mais j'ai besoin que cette méthode soit exécutée toutes les 10 secondes pour qu'elle soit à jour.

Comment puis-je faire ceci?

angulartypescriptrxjsangular6
4
Paul B

Utilisez la variable rxjs pour appeler la demande d’API au démarrage, puis toutes les 10 secondes.

Ceci est mieux réalisé en utilisant rxjs pour diviser pour régner.

Tout d'abord, importez les éléments suivants: 

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

Ajoutez ensuite la propriété pour gérer la demande à l’API:

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

Ensuite, ajoutez la propriété pour gérer le minutage:

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

Enfin, lancez la commande kill si le composant est tué:

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

Voici une démo StackBlitz .

5
Faisal

Essayez avec timer de 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) de RxJS n’est pas approprié car il émettra des valeurs SEULEMENT après 10 secondes et pas immédiatement pour la première fois (et je pense que ce n’est pas ce que vous recherchez). 

Cependant, timer(0, 10000), émettra des valeurs immédiatement (0) et toutes les 10 secondes (10000) jusqu'à la désinscription.

4
Adrien SAULNIER

Dans votre méthode checkData, vous pouvez faire quelque chose comme ceci:

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

Ensuite, votre abonné recevra le résultat de l'appel http toutes les 10 secondes.

0
Marc Harry

La manière de faire cela serait la suivante.

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

J'espère que ceci vous aidera 

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