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'));
  }

如果电子邮件是@gmail.com 一切正常并且 redux 状态发生变化但是如果登录失败，我的 "catch" 操作员出于某种原因没有捕获到错误，而是错误出现在控制台如下

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

import 'rxjs/add/operator/catch';

有人知道这里发生了什么吗？

谢谢

Answer 1

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

也就是说，抛出错误而不是 returning 一个 observable - map 和 catch 运算符将链接到它。所以它不能被 catch.

捕获

相反，您可以 return 使用 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'));
}

这样做会 return 一个会在订阅时引发错误通知的可观察对象。该错误将被您的 catch.

捕获

RXJS Catch 运算符未捕获错误

RXJS Catch operator not catch the Error

rxjs

webstorm

redux

ngrx

angular