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?
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 :
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()
}
})
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.
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
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 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.
