36 votes

Comment annuler / désinscrire toutes les requêtes HTTP en attente angular 4+

Comment annuler / abandonner toutes les requêtes HTTP en attente angulaire 4+.

Il existe une méthode unsubscribe pour annuler les requêtes HTTP mais comment annuler toutes les requêtes en attente en une seule fois.

Surtout lorsque l'itinéraire change.

Il y a une chose que j'ai faite

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

mais comment y parvenir à l'échelle mondiale

Des idées?

56voto

Alexis Facques Points 1021

La caisse de l' takeUntil() opérateur de RxJS à l'échelle mondiale déposez vos abonnements :

- RxJS 6+ (à l'aide de l' pipe de la syntaxe)

import { takeUntil } from 'rxjs/operators';

export class YourComponent {
   protected ngUnsubscribe: Subject<void> = new Subject<void>();

   [...]

   public httpGet(): void {
      this.http.get()
          .pipe( takeUntil(this.ngUnsubscribe) )
          .subscribe( (data) => { ... });
   }

   public ngOnDestroy(): void {
       // This aborts all HTTP requests.
       this.ngUnsubscribe.next();
       // This completes the subject properlly.
       this.ngUnsubscribe.complete();
   }
}

- RxJS < 6

import 'rxjs/add/operator/takeUntil'

export class YourComponent {
   protected ngUnsubscribe: Subject<void> = new Subject<void>();

   [...]

   public httpGet(): void {
      this.http.get()
         .takeUntil(this.ngUnsubscribe)
         .subscribe( (data) => { ... })
   }

   public ngOnDestroy(): void {
       this.ngUnsubscribe.next();
       this.ngUnsubscribe.complete();
   }
}

Vous pouvez émettre un événement sur votre désabonnement Subject l'aide next() chaque fois que vous voulez remplir un tas de flux. C'est aussi une bonne pratique pour vous désabonner de actif Observables comme le composant est détruit, pour éviter les fuites de mémoire.

La peine de lire :

37voto

Bladito Points 331

Vous pouvez créer un intercepteur pour appliquer l'opérateur takeUntil à chaque demande. Ensuite, lors du changement d'itinéraire, vous émettez une valeur qui annule toutes les demandes en attente.

 @Injectable()
export class HttpCancelInterceptor implements HttpInterceptor {
  constructor(private httpCancelService: HttpCancelService) { }

  intercept<T>(req: HttpRequest<T>, next: HttpHandler): Observable<HttpEvent<T>> {
    return next.handle(req).takeUntil(this.httpCancelService.onCancelPendingRequests())
  }
}
 

Service d'assistance.

 @Injectable()
export class HttpCancelService {
  private cancelPendingRequests$ = new Subject<void>()

  constructor() { }

  /** Cancels all pending Http requests. */
  public cancelPendingRequests() {
    this.cancelPendingRequests$.next()
  }

  public onCancelPendingRequests() {
    return this.cancelPendingRequests$.asObservable()
  }

}
 

Accrochez-vous aux changements de route quelque part dans votre application (par exemple, composant d'application).

 this.router.events.subscribe(event => {
  if (event instanceof ActivationEnd) {
    this.httpCancelService.cancelPendingRequests()
  }
})
 

10voto

Anton Lee Points 596

Si vous ne souhaitez pas désabonner manuellement tous les abonnements, vous pouvez le faire:

 export function AutoUnsubscribe(constructor) {

  const original = constructor.prototype.ngOnDestroy;

  constructor.prototype.ngOnDestroy = function() {
    for (const prop in this) {
      if (prop) {
        const property = this[prop];
        if (property && (typeof property.unsubscribe === 'function')) {
          property.unsubscribe();
        }
      }
    }

    if (original && typeof original === 'function') {
      original.apply(this, arguments)
    };
  };

}
 

Ensuite, vous pouvez l'utiliser comme décorateur dans votre composant

 @AutoUnsubscribe
export class YourComponent  {
}
 

mais vous devez toujours stocker les abonnements en tant que propriétés de composant. Et lorsque vous quittez le composant, la fonction de désinscription automatique se produit.

2voto

Vala Khosravi Points 979

ngOnDestroy rappel est généralement utilisé pour tout nettoyage personnalisé qui doit se produire lorsque l'instance est détruite.

où voulez-vous annuler votre demande?

peut-être que si vous voulez annuler vos demandes sur le navigateur fermer, il y a une idée créative ici

2voto

Chandru Points 4811

Essaye ça :

 import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Rx';

export class Component implements OnInit, OnDestroy {
    private subscription: Subscription;
    ngOnInit() {
        this.subscription = this.route.params.subscribe();
    }
    ngOnDestroy() {
        this.subscription.unsubscribe();
    }
}
 

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X