angular - Angular 中的主题在 500 内部错误后停止工作

Question

我有一个发布/订阅模式，用于将数据更改从菜单项发送到我的 Angular 应用程序中的 Leaflet 组件，但是，当服务器返回内部服务器错误(代码:500)时，发布/订阅停止有效，这意味着任何额外的点击都不会触发另一端的订阅。

我一直无法追踪发生这种情况的原因，并且在内部服务器错误(代码:500)后强制用户刷新页面并不是 SPA 的真正意义。

代码示例

  setAccountID(event: MouseEvent, node: IAccount) {
    this.stopPropogation(event);
    this.accountChangeService.accountID = node.id;
    this.accountChangeService.setAccountID();
  }

上面的代码片段在菜单树中用于更改用户尝试查看的帐户。每个管理用户都可以在他们管理的帐户之间切换。

accountChangeService 看起来像这样:

@Injectable({
  providedIn: 'root'
})
export class AccountChangeService {

  accountID: string;
  accountIDChange: Subject<string> = new Subject<string>();

  constructor() {
    this.accountIDChange.subscribe((value) => {
      this.accountID = value;
    });
  }

  setAccountID() {
    this.accountIDChange.next(this.accountID);
  }
}

然后我再次使用此服务，订阅更改，并使用该值从服务中提取信息:

this.accountChangeService.accountIDChange
  .pipe(tap(output => {
    /** code left out for brevity **/
    return output; 
  }),
  switchMap((output: any) => this.service.retrieveAccountInformation({ 
    id: output 
  })))
  .subscribe(output => {
    /** code left out for brevity **/
});

问题出现了，当在 switchMap(...) 语句中抛出错误时，整个调用阻塞，因此没有后续调用通过。

我已经尝试添加 catchError、订阅错误，甚至全局的异常处理程序来弄清楚为什么它不允许在内部 500 之后进行任何调用。

我需要捕获 500 内部，向用户显示错误，并允许他们尝试不同的调用。

不知道我做错了什么？

Answer 1

这一切都归结于您放置 catchError 的地方。一旦 RxJS 链接收到错误，它会自动取消订阅，所以你想在 switchMap 中使用 catchError ，如下所示:

switchMap(output => this.service.retrieveAccountInformation({ 
    id: output 
  }).pipe(
    tap({ error: /* show error message */ }),
    catchError(() => EMPTY), // ignore the error and emit nothing
  )
),

如果需要，您当然可以将错误变成 next 常规通知。