Angular自定义错误处理程序和NGRX引起无限循环

Question

在 Angular 应用程序中，我实现了一个自定义错误处理程序，它显示警报（Angular Material 小吃栏）并调度 ngrx 操作来隐藏加载微调器。

这是一个错误处理程序：

export class ErrorHandlerService extends ErrorHandler {
  constructor(private snackbar: SnackbarService, private store: Store<AppState>) {
    super();
  }

  override handleError(error: any): void {
    super.handleError(error);
    const msg =
      error.rejection?.message ?? error.error?.message ?? error.message;
    this.snackbar.openSnackBar(msg, true);
    this.store.dispatch(loadingZero());
  }
}

reducer 将侦听 LOADING_ZERO 操作并将计数器设置为 0（如果计数器大于零，则显示加载微调器；如果计数器等于零，则隐藏）。

根组件订阅选择器并分别显示/隐藏微调器。我正在使用 ngx-spinner。

export class AppComponent implements OnInit, OnDestroy {
  isLoading$ = this.store.select(isLoadingSelector);
  _destroying$ = new Subject<boolean>();

  constructor(
    private spinner: NgxSpinnerService,
    // ...
  ) {}

  ngOnInit() {
    this.isLoading$
      .pipe(takeUntil(this._destroying$))
      .subscribe((value) =>
        value ? this.spinner.show() : this.spinner.hide(),
      );
    // ...
  }
  
  // ...
}

问题是这样的：渲染模板时出错会导致无限循环。其他错误（如失败的 HTTP 请求）则不会。如果我不在错误处理程序中分派 ngrx 操作，则错误也不会循环。

我猜这与变更检测有关，但仍然无法弄清楚。

Answer 1

我发现保留请求计数器很容易出错（正如您在此处看到的那样）。
更好的解决方案是存储每个实体的请求状态，并将所有加载状态合并为一个。这可以进一步扩展（如果需要），并根据待处理的请求显示不同的微调器。

话虽这么说，“渲染模板时的错误导致无限循环”让我认为计数器将为负（或者统计数据将关闭），因此将显示微调器。

解决方案是仅在错误是 HTTP 错误时分派该操作，或者您也可以实现一个 HTTP 拦截器来分派该操作。这样，只有失败的 HTTP 请求才会发送错误。