当 observable 在 IONIC 3 ASP.NET WEB API 中返回错误时显示 toast答案

【问题标题】：Display toast when observable returns an error in IONIC 3 ASP.NET WEB API当 observable 在 IONIC 3 ASP.NET WEB API 中返回错误时显示 toast
【发布时间】：2018-05-08 15:17:15
【问题描述】：

我正在开发一个使用 Asp.NET Web API 服务的 IONIC 3 应用程序，用于身份验证使用基于令牌的身份验证，因此当用户输入有效凭据时，他会返回一个将保存在 FireBase db 中的令牌，如果他输入错误的凭据，他得到一个显示简单错误文本的祝酒词。

无论是 Token 还是 Observable 中的错误，我都能成功获得响应，但我想在凭据错误的情况下显示敬酒。

我是 Rxjs 和响应式编程的新手。所以我的问题是如何将显示 toast 的代码链接到下面代码中的 subscribe 方法：

logUser(){
      this.loginService.login(this.loginModel.userName,this.loginModel.password,this.loginModel.grant_type)
        .subscribe(token => {this.Token= token ,
                            console.log(this.Token.access_token)},
                              error => this.errorMessage = <any>error);      
         //<any>this.toast.create(this.toastOptions).present()             
      }

【问题讨论】：

标签： angular typescript ionic2 ionic3

【解决方案1】：

我以不同的方式缩进了你的代码，以向你展示你应该在哪里打开这两种情况（成功和错误）的 toast 消息：

logUser(){
    this.loginService.login(this.loginModel.userName,this.loginModel.password,this.loginModel.grant_type)
        .subscribe(
            token => {
                this.Token = token;
                console.log(this.Token.access_token);

                // Here you can show a toast when the user was able to get the token!
                // ...
            },
            error => {
                this.errorMessage = (<any>error);

                // Here you can show a toast when an error has ocurred!
                // ...

            });      
}

所以基本上由于subscribe 是异步的，您需要将处理成功场景的所有代码放入token => { ... } 回调中，并将所有处理错误的代码放入error => { ...} 回调中。

【讨论】：