switchMap angular observable 后发出的问题答案

【问题标题】：Problem with emit after switchMap angular observableswitchMap angular observable 后发出的问题
【发布时间】：2019-03-05 22:47:57
【问题描述】：

问题是：当 this.getPost())) 返回错误时，例如 404（它是返回 GET 的函数），然后代码 this.loggedChange.emit(false) 没有被执行，我不知道为什么。在这种情况下，我的loggedChangedHandler 输出错误。看起来像内部错误，在 swtichMap 之后，this.loggedChange 没有“观察到”。在 switchMap 之前它已经观察到，所以我认为它可能是线索，但我不知道为什么它会这样工作。如果第一个函数返回错误（this.authLogin - 它也返回 get），那么 this.loggedChange.emit 可以正常工作。

子组件：

login(): void {
  this.authLogin(this.email, this.password)
    .pipe(
      tap(() => this.loggedChange.emit(true)),

      switchMap(() => this.getPost())
    )

    .subscribe(
      resp => {
        //some code here
      },
      error => {
        this.loggedChange.emit(false);
      }
    );
}

在父组件中我有这样的东西：

<login-component (loggedChange)="loggedChangeHandler($event)"></login-component>

在ts中

loggedIn$ = new BehaviorSubject(false);

loggedChangedHandler(el: boolean): any {
  this.loggedIn$.next(el);
}

【问题讨论】：

getPost 是做什么的？

标签： angular typescript rxjs observable switchmap

【解决方案1】：

我认为您有这种行为是因为错误发生在您的 this.getPost() 调用中。

由于您没有错误处理程序，因此尽管引发了错误，但 observable 仍会尝试继续。

您可以尝试像这样在管道中添加catchError：

this.authLogin(this.email, this.password)
    .pipe(
      tap(() => this.loggedChange.emit(true)),
      switchMap(() => this.getPost()),
      catchError(error => this.loggedChange.emit(false))
    )
    .subscribe(
      resp => {
        //some code here
      },
      error => {
        this.loggedChange.emit(false);
      }
    );

【讨论】：