、使用Promise.catch

Question

は私がサインイン用のAuth0を使用して、私は次のコードを持っている場合は動作しませんバインディング：

$scope.login = function() { 
     $scope.loginFailed = false; 
     $scope.loading = true; 

     loaderService.show(); 

     let credentials = { 
      email: $scope.email, 
      password: $scope.password 
     }; 
     principal.signin(credentials) 
      .then(() => { 
       $state.go('main.index'); 
      }) 
      .catch(e => { 
       showError(e.error_description); 
       loaderService.hide(); 
      }); 
    }; 

principleサービスが機能サインインの含まれていますので、

signin(credentials) { 
     return new Promise((resolve, reject) => { 
      this.auth.signin({ 
       connection: 'Username-Password-Authentication', 
       email: credentials.email, 
       sso: false, 
       password: credentials.password, 
       authParams: { 
        scope: 'openid name email' 
       } 
      }, this.onLoginSuccess.bind(this, resolve, reject), this.onLoginFailed.bind(this, reject)); 
     }); 
    } 

、あなたが見ることができるように私は約束を作成し、Auth0コールバックに解決/拒否を渡します。 コールバックは非常に単純です：

は

onLoginSuccess(resolve, reject, profile, token) { 
     let userData = this.collectData(profile); 
     ... store token 
     return this.syncCurrent(userData) //request to server 
      .then(() => { 
       return resolve(); 
      }) 
      .catch(() => { 
       this.signOut(); 
       return reject(); 
      }); 
} 

onLoginFailed(reject, error) { 
     return reject(error.details); 
} 

それでは、最初のスニペットに戻りましょう。次のコードがあります：

principal.signin(credentials) 
       .then(() => { 
        $state.go('main.index'); 
       }) 
       .catch(e => { 
        showError(e.error_description); 
        loaderService.hide(); 
       }); 

正しいメールとパスワードのリダイレクトがうまく動作し、メインページが表示されます。しかし、間違った電子メール/パスワードを使用すると、catchブロックが実行されていることがわかります。デバッガで値が変更されているのがわかりますが、エラーブロックが表示されず、イメージが読み込まれません。私は今、コードをリファクタリングしているので、これはhtmlの問題ではありません。上記のコードはすべて1つのファイルに含まれています。私は約束を使用せず、すべて正常に動作しました。私はprincipal.signin(credentials)関数の前にshowErrorメソッドを実行しようとしましたが、テストのためだけにエラーが発生し、読み込みイメージが隠されていました。だから、私は問題が約束と正確にブロックをキャッチすると思うが、私はどこがわからない。

PS。 showErrorは以下の通りである：

function showError(errorText) { 
     $scope.loading = false; 
     $scope.loginFailed = true; 
     $scope.loginErrorMessage = errorText; 
    } 

Answer 1

この問題の原因は、非角度約束を使用しています。角度の約束、すなわち$qサービスは、解決後にダイジェストサイクルを呼び出すことに注意します。ダイジェストサイクルは、角度1の変化検出の実装であり、すなわちウォッチャーに通知しアクションを実行させるものである。

$qを使用するとこの問題は解決します。

コードのthenはおそらく$state.go()と呼ばれ、ダイジェストサイクルが呼び出された可能性があります。 catchの部分はそうではなかったので、変更はウォッチャーを起動する機会を得ることはありませんでした。