删除可观察到的操作，因为订阅已取消

如何解决删除可观察到的操作，因为订阅已取消

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

请注意，这只是“瞬时解决方案”，因为即使取消观察者的订阅，也会调用错误案例。如果您有更好的例子，请随时回答。