2

我有一个问题，我认为我可以通过订阅解决：

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 秒内出现。

因此，当我发出第一个请求并等待它的回答（这将引发错误）时，已经会发出第二个请求，thirs，依此类推。

此时，如果我离开页面（调用ngOnDestroy），我想从另一个组件更新标题。但是，离开页面后，我会收到上一个组件的所有响应（成功或失败）。我想在离开时取消所有这些。我以为这unsubscribing会data$解决这个问题，但问题仍然存在。

谢谢

4

2 回答 2

1

您有嵌套订阅，这是一种不好的做法，并且使取消订阅所有内部订阅变得更加困难。使用 observable 映射运算符，如,mergeMap或映射到内部 observable 并用于取消订阅。switchMapconcatMapexhaustMaptakeUntil

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>
于 2020-11-12T12:30:55.543 回答
0

我找到了一个快速的解决方案，但不是最好的，因为这不会关闭订阅。

声明一个布尔值pageLeaved = false并将其设置为真ngOnDestroy。然后，在订阅错误的情况下，如果pageLeaved为真则返回。

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

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

于 2020-11-12T12:01:59.187 回答