问题描述
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
});
}
因为我的间隔为1秒,并且服务器已关闭(有意关闭),所以我的间隔将在5秒内发出5个请求,但是foreach的答案将在1秒内很快出现。
因此,当我发出第一个请求并等待其答案(这将引发错误)时,已经发出第二个请求,干渴等等。
这一次,如果我离开页面(调用ngOnDestroy
),我想从另一个组件更新标题。但是,离开页面后,我将收到上一组件的所有响应(成功或失败)。我想在离开时取消所有这些。我认为unsubscribing
至data$
将解决此问题,但问题仍然存在。
谢谢
解决方法
您有嵌套的订阅,这是不好的做法,这使得取消订阅所有内部订阅变得更加困难。使用mergeMap
,switchMap
,concatMap
或exhaustMap
之类的可观察映射运算符映射到内部可观察变量,并使用takeUntil
退订。
private destroy$ = new Subject();
ngOnInit() {
interval(1000).pipe(
concatMap(() => this.getData()),takeUntil(this.destroy$)
).subscribe(response => {
// update the header component value based on response
});
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
getData(): Observable<any> {
return service.getData().pipe(
catchError(error => {
// update header component on error
return EMPTY; // if the subscribe callback shouldn't be executed on errors
// OR return an observable with the value the subscribe callback in ngOnInit should receive
return of(/* what the header should be set to on errors */)
})
);
}
您还可以使用async
管道进行订阅和处理订阅。也许使用timer
而不是interval
发送第一个请求而没有初始延迟。
data$ = timer(0,1000).pipe(
concatMap(() => this.getData()),);
getData(): Observable<any> {
return service.getData().pipe(
catchError(error => {
return of(/* what the header should be set to on errors */)
})
);
}
<header>
<ng-container *ngIf="data$ | async as data">
{{ data }}
</ng-container>
</header>
,
我找到了一个快速的解决方案,但不是最好的解决方案,因为这不会关闭订阅。
声明一个布尔值pageLeaved = false
并将其设置为ngOnDestroy
上的true。然后,在订阅错误的情况下,只要pageLeaved
为true,就返回。
pageLeaved = false;
refresh$: Subscription;
data$: Subscription;
ngOnInit() {
this.refresh = interval(1000).subscribe(
() => {
this.getData();
}
);
}
ngOnDestroy() {
this.pageLeaved = true;
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
if (this.pageLeaved) {
return;
}
});
}
请注意,这只是“瞬时解决方案”,因为即使取消观察者的订阅,也会调用错误案例。如果您有更好的例子,请随时回答。