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”操作员由于某种原因没有捕捉到错误，而是在控制台中显示错误如下@987654322 @

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

import 'rxjs/add/operator/catch';

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

谢谢

Answer 1

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

也就是说，错误被抛出，而不是返回一个 observable - map 和 catch 运算符将被链接到该 observable。所以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 将捕获该错误。