Javascript 在错误后rx中断时可观察

我正在尝试使用ngrx store+ng effects为我的应用程序编写登录流。我已经成功地编写了它，并且它在happy scenerio中工作，但是当用户向表单输入错误的值时，服务器会用401响应，下一次登录尝试没有效果。我已经读到，为了不“破坏”流，在处理可观察对象时必须捕获异常，但据我所知，我正在捕获异常，并且它现在仍在工作

我们遵守守则

export class LoginComponent {

  logged = new Observable<any>();

  constructor(private store: Store<AppStore>) {
   this.logged = store.select('login');
  }

  login(username: string, password: string){
    let body = JSON.stringify({username, password});
    this.store.dispatch({type: LoginActions.ATTEMPT_LOGIN, payload: body});
  }

}

@Injectable()
export class LoginEffects {

  constructor(
    private actions: Actions,
    private loginService: LoginService
  ) { }

  @Effect() login = this.actions
    .ofType(LoginActions.ATTEMPT_LOGIN)
    .map(toPayload)
    .switchMap(payload => this.loginService.attemptLogin(payload))
    .map(response => new LoginActions.LoginSuccess(response))
    .catch(error => of(new LoginActions.LoginFailed(error)));

  @Effect() success = this.actions
    .ofType(LoginActions.LOGIN_SUCCESS)
    .map(toPayload)
    .map(payload => localStorage.setItem(Global.TOKEN, payload))
    .map(() => go(['/menu']));

  @Effect() error = this.actions
    .ofType(LoginActions.LOGIN_FAILED)
    .map(toPayload)
    .map(payload => console.log(payload))
    .ignoreElements();
}

export const login = (state: any = null, action: Actions) => {
  switch (action.type) {
    case LoginActions.ATTEMPT_LOGIN:
      console.log('hello from reducer attempt login');
      return action.payload;
    case LoginActions.LOGIN_SUCCESS:
      console.log('hello from reducer success login');
      return action.payload;
    case LoginActions.LOGIN_FAILED:
      console.log('hello from reducer failed login');
      return action.payload;
    default:
      return state;
  }
};

@Injectable()
export class LoginService {

  auth = new Observable<any>();
  constructor(private store: Store<AppStore>, private http: Http) {
    this.auth = store.select('auth');
  }

  attemptLogin(payload): Observable<any> {
    // let body = JSON.stringify({username, password});
    return this.http.post(Global.API_URL + '/login', payload)
      .map(response => response.headers.get('Authorization'));
      // .map(action => (
      //   { type: LoginActions.ATTEMPT_LOGIN, payload: action}))
      // .subscribe(action => {this.store.dispatch(action);
      // });
  }
}

导出类登录组件{
记录=新的可观察（）；
构造函数（私有存储：存储）{
this.logged=store.select（'login'）；
}
登录（用户名：string，密码：string）{
让body=JSON.stringify（{username，password}）；
this.store.dispatch（{type:LoginActions.trunt\u LOGIN，payload:body}）；
}
}
@可注射（）
导出类登录效果{
建造师(
私人行动：行动，
私人登录服务：登录服务
) { }
@Effect（）login=this.actions
.of类型（登录操作.尝试登录）
.map（toPayload）
.switchMap（有效负载=>this.loginService.attemptLogin（有效负载））
.map（响应=>新登录操作.loginsAccess（响应））
.catch（error=>of（new LoginActions.LoginFailed（error））；
@Effect（）success=this.actions
.of类型（登录操作.登录成功）
.map（toPayload）
.map（有效负载=>localStorage.setItem（Global.TOKEN，有效负载））
.map（（）=>go（['/菜单']）；
@Effect（）error=this.actions
.of类型（登录操作.LOGIN\u失败）
.map（toPayload）
.map（有效负载=>console.log（有效负载））
.ignoreElements（）；
}
导出常量登录=（状态：any=null，操作：操作）=>{
开关（动作类型）{
案例登录操作。尝试登录：
log（'hello from login'）；
返回动作。有效载荷；
案例登录操作.LOGIN\u成功：
log（'hello from reducer success login'）；
返回动作。有效载荷；
案例登录操作.LOGIN\u失败：
log（'hello from reducer登录失败'）；
返回动作。有效载荷；
违约：
返回状态；
}
};
@可注射（）
导出类登录服务{
auth=新的可观察（）；
构造函数（私有存储：存储，私有http:http）{
this.auth=store.select（'auth'）；
}
attemptLogin（有效负载）：可观察{
//让body=JSON.stringify（{username，password}）；
返回此.http.post（Global.API_URL+'/login'，有效负载）
.map（response=>response.headers.get（'Authorization'）；
//.map（操作=>(
//{type:LoginActions.trust_LOGIN，payload:action}）
//.subscribe（action=>{this.store.dispatch（action））；
// });
}
}

捕获错误时，由

catch

返回的可观察值用于继续链。返回的observable完成，完成效果并看到

ngrx

取消订阅效果

将

映射

和

捕捉

移动到

开关映射

：

@Effect() login = this.actions
.ofType(LoginActions.ATTEMPT_LOGIN)
.map(toPayload)
.switchMap(payload => this.loginService.attemptLogin(payload)
  .map(response => new LoginActions.LoginSuccess(response))
  .catch(error => of(new LoginActions.LoginFailed(error)))
);

---

在

开关映射中捕捉不会完成效果。
当捕捉到错误时，由
catch
返回的可观察值将用于继续链。返回的observable完成，完成效果并看到
ngrx
取消订阅效果

将
映射
和
捕捉
移动到
开关映射
：

@Effect() login = this.actions
.ofType(LoginActions.ATTEMPT_LOGIN)
.map(toPayload)
.switchMap(payload => this.loginService.attemptLogin(payload)
  .map(response => new LoginActions.LoginSuccess(response))
  .catch(error => of(new LoginActions.LoginFailed(error)))
);

在
开关映射中捕捉不会完成效果。
快乐路径场景：

错误场景：需要reducer来处理错误案例，并在需要时向用户显示一些消息。

通过使用
rxjs/operators
中的
pipe
和
catchError
，我们可以将两个（或所有）错误案例重新映射到一个错误操作中，然后我们可以在
effects
中直接处理，并进行副作用ui更改

@Effect() login = this.actions
.ofType(LoginActions.ATTEMPT_LOGIN)
.map(toPayload)
.switchMap(payload => this.loginService.attemptLogin(payload)
  .map(response => new LoginActions.LoginSuccess(response))
  .catch(error => of(new LoginActions.LoginFailed(error)))
);

快乐之路情景：

错误场景：需要reducer来处理错误案例，并在需要时向用户显示一些消息。

通过使用
rxjs/operators
中的
pipe
和
catchError
，我们可以将两个（或所有）错误案例重新映射到一个错误操作中，然后我们可以在
effects
中直接处理，并进行副作用ui更改

@Effect() login = this.actions
.ofType(LoginActions.ATTEMPT_LOGIN)
.map(toPayload)
.switchMap(payload => this.loginService.attemptLogin(payload)
  .map(response => new LoginActions.LoginSuccess(response))
  .catch(error => of(new LoginActions.LoginFailed(error)))
);

你要全部导入吗？你要全部导入吗？？