Question

我尝试使用ngrx在angular 5应用内与我的REST API端点进行交互。

成功提出请求非常简单，工作正常。但是，如果API在请求中注册了一个错误，并且希望向我的前端角度应用程序发回消息，那么我不确定如何向用户显示错误和消息。

以下是我对登录的身份验证效果：

@Effect()
  authSignin = this.actions$
    .ofType(AuthActions.TRY_SIGNIN)
    .map((action: AuthActions.TrySignin) => {
      return action.payload;
    })
    .switchMap((authData: { email: string, password: string }) => {
      return this.http.post<any>(this.globals.login, authData);
    })
    .map((returnData: { message: string, auth: { token: string, user_name: string } }) => {
      this.router.navigate(['']);
      localStorage.setItem('token', returnData.auth.token);
      localStorage.setItem('user_name', returnData.auth.user_name);
      return {
        type: AuthActions.SET_AUTH,
        payload: {
          token: returnData.auth.token,
          user_name: returnData.auth.user_name,
          authenticated: true
        }
      };
    })
    .catch((err: any) => {
      console.log(err);
      return {
        type: AuthActions.AUTH_ERROR
      };
    });

目前，如果您发送包含正确信息的请求，您将收到一个令牌/您的用户名，一切正常。

但是，如果API想要告诉您电子邮件/密码不正确，我不确定如何注册错误并告诉用户。我曾尝试在其他地方寻找易于使用的资源，但我发现的任何内容似乎都无法使用。

使用上面的代码，我收到了TS编译错误：

src / app / auth / store / auth.effects.ts（44,12）中的错误：

错误TS2345：类型的参数＆＃39;（错误：任何）=＆gt; {type：string; }＆＃39;不能赋值类型＆＃39;（错误：任何，捕获：Observable＆lt; {type：string; payload：{token：string; user_name：string; authen ...＆＃39;。

输入＆＃39; {type：string; }＆＃39;不能分配给＆＃39; ObservableInput＆lt; {}＆gt;＆＃39;。

输入＆＃39; {type：string; }＆＃39;不能分配给＆＃39; ArrayLike＆lt; {}＆gt;＆＃39;。

物业长度＆＃39;类型＆＃39; {type：string; }＆＃39;

并在请求后的控制台中：

错误类型错误：您提供了一个流所在的无效对象预期。您可以提供Observable，Promise，Array或Iterable。

一旦我发出错误请求，它就不再允许我从同一表单发出任何http请求，我每次都要刷新页面。

希望有人可以帮助我指出正确的方向。如果您有任何疑问/想要查看更多我的代码，请说出来！

Answer 1

在 catch 内，您无法发送对象。您应该返回像bellow

这样的Observable

catch((error) => {
  console.log(error);
  return Observable.of({type: AuthActions.AUTH_ERROR});
})

Answer 2

Observable catch与您需要返回一个Observable的javascript catch不同，否则它会抛出一个TypeError，因为它需要将其解包。

一种简单的处理方法是将对象包装在of之类的Observable创建方法中。

所以从本质上讲是

catch((error) => Observable.of({type: AuthActions.AUTH_ERROR}))

如何使用ngrx存储/效果捕获http错误并向用户显示消息？（angular2 +）

2 个答案:

如何使用ngrx存储/效果捕获http错误并向用户显示消息？ （angular2 +）

2 个答案:

如何使用ngrx存储/效果捕获http错误并向用户显示消息？（angular2 +）