RXJS Catch運算符未捕獲錯誤

Question

當我嘗試在Angular4項目中設置Redux時遇到問題，我使用以下代碼來管理登錄操作：

@Effect()
  login$: Observable<Action> = this.act
    .ofType(actions.LOGIN)
    .map((action: actions.LoginAction) => action.payload)
    .switchMap((val: { email: string, password: string }) => this.authService.login(val.email, val.password)
      .map(auth => new actions.LoginSuccessAction(auth))
      .catch(err =>  of(new actions.LoginFailAction(err))));

由於某些原因，Webstorm無法識別rxjs“ map”運算符，但在編譯時效果很好。

在authService內部，我在檢查中定義了模擬日志：

login(email: string, password: string): Observable<any> {
    if (email == 'a@gmail.com') {
      return Observable.of('Login Success');
    }
     throw(new Error('Username or password incorrect'));
  }

如果電子郵件為a@gmail.com，則一切正常，並且redux狀態會更改，但是如果登錄失敗，則由於某種原因，我的“ catch”運算符無法捕獲該錯誤，而是在控制台中顯示以下錯誤

在我的核心模塊文件夾中，按以下方式導入模塊：

import 'rxjs/add/operator/catch';

有人知道這里發生了什么嗎？

謝謝

Answer 1

問題是login方法中的錯誤被拋出到效果中可觀察到的鏈之外。

也就是說，將引發錯誤，而不是返回可觀察的對象- map和catch操作符將被鏈接到該對象。 因此它不能被catch 。

相反，您可以返回使用Observable.throw創建的observable：

import 'rxjs/add/observable/throw';

login(email: string, password: string): Observable<any> {
  if (email == 'a@gmail.com') {
    return Observable.of('Login Success');
  }
  return Observable.throw(new Error('Username or password incorrect'));
}

這樣做將返回一個observable，訂閱時將引發錯誤通知。 而這個錯誤將被您catch 。