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 。