I have a problem which I tought I can solve with a subscription:
refresh$: Subscription;
data$: Subscription;
ngOnInit() {
this.refresh = interval(1000).subscribe(() => {
this.getData();
}
);
}
ngOnDestroy() {
this.refresh$.unsubscribe();
this.data$.unsubscribe();
}
getData() {
this.data$ = service.getData().subscribe(response => {
// here, based on response, I update the header component value whithin an event
}, err => {
// also, if catch error, update header component
});
}
Because I have an interval at 1 seconds and the server is down (intentional), my interval will emit 5 requests in 5 seconds, but the answer foreach will came in much time as 1 second.
So, when I emit first request and wait its answer (which will throw an error), already will emit the second request, the thirs, and so on.
In this time, if I leave the page (calling ngOnDestroy
), I want to update the header from another component. But, after leaving the page, I will receive all the responses (success or failure) of the previous component. I want to cancell all these when I leave it. I thought that unsubscribing
to data$
will solve this, but the problem persist.
thanks
You have nested subscriptions which is bad practice and makes it harder to unsubscribe from all inner subscriptions. Use an observable mapping operator like
mergeMap
,switchMap
,concatMap
orexhaustMap
to map to an inner observable and usetakeUntil
to unsubscribe.You could also use the
async
pipe to subscribe and handle the subscription. Maybe usetimer
instead ofinterval
to send the first request without an initial delay.