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内部，我在check中定义了模拟日志：

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”操作符由于某种原因没有捕获错误，而是错误出现在控制台中，如下所示{{ 3}}

在我的核心模块文件夹中，我导入模块如下：

import 'rxjs/add/operator/catch';

有谁知道这里发生了什么？

由于

Answer 1

问题是login方法中的错误被抛出在效果中组成的可观察链之外。

也就是说，抛出错误而不是返回一个可观察的错误 - map和catch运算符将被链接到该错误。所以它不能被catch抓住。

相反，您可以返回使用Observable.throw创建的可观察对象：

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抓住。