角2プロミスとリファクタリング

Question

私はちょうどクリーンコードの読み込みを完了し、私の関数のそれぞれがその本で行うように1つのことを行うように、角2のコードをリファクタリングしようとしていますが、私はそれが一般的な約束についての理解の欠如になると思う。 これは私の現在の作業バージョンです。私はここで

var userInfo = this.getUserInfoFromStorage(); 
prepopulateUserInfo(userInfo); 

にこの単一のメソッドをオンにしようとしてきた

prepopulateUserInfoFromStorage() { 
    var emailFromStorage; 
    var passwordFromStorage; 

    this._storage.ready().then(() => { 
      this._storage.get('email').then((emailValue) => { 
        emailFromStorage = emailValue; 
      }).then(() => { 
        this._storage.get('password').then((passwordValue) => { 
          passwordFromStorage = passwordValue; 

        }) 
      }).then(() => { 
        if (emailFromStorage != null && passwordFromStorage != null) { 

          (<FormControl>this.loginForm.controls['email']).setValue(emailFromStorage); 
          (<FormControl>this.loginForm.controls['password']).setValue(passwordFromStorage); 
        } 
      }); 
    }).catch(function (error) { 
    }); 
} 

は失敗しているもので、私の最新の試みです。私は問題が彼らがいつ呼び出されているのか、彼らが約束を終えているのかと関係していると信じています。上記の私の作業コードは、それぞれの約束が終わるまで起こっているわけではないので、私は理解していますが、分割しようとすると適切な機能を失うことになります。もし誰かが私をここで助けて、概念的に私が逃していることをうまく説明できたら、私はそれをとても感謝します。

getUserInfoFromStorage() { 
    var emailFromStorage; 
    var passwordFromStorage; 

    this._storage.get('email').then((emailValue) => { 
     emailFromStorage= emailValue; 
    }).then(()=>{ 
     this._storage.get('password') 
     .then((passwordValue)=> { 
      passwordFromStorage = passwordValue; 
     }) 
    }) 

    return {email: emailFromStorage, password: passwordFromStorage}; 
    } 

    prepopulateUserInfo(userInfo: any) { 
    if (userInfo.email != null && userInfo.password != null) { 
     (<FormControl>this.loginForm.controls['email']) 
     .setValue(userInfo.email); 

（this.loginForm.controls [ 'パスワード']） .setValue（userInfo.password）。 } }

Answer 1

まず、非同期を理解する必要があります。非同期メソッドから直接情報を返す方法はありません。あなたは約束を返すことができます。

第2に、Promise.all()を使用して2つの約束を結合することができます。

最後に、then()にコールバック内のthen()をコールすると、最初にthen()に渡されると問題が発生します。約束は、それらを平らにすることを許すことによって、コールバックのようなピラミッドを避けるように設計されています。

AngularJSの約束のために書かれていますが、あなたが落としたいくつかのトラップについて説明しているthis blog article I wroteを読むことをお勧めします。

prepopulateUserInfoFromStorage() { 
    this.getUserInfoFromStorage().then(info => this.prepopulateUserInfo(info)); 
} 

prepopulateUserInfo(userInfo: any) { 
    if (userInfo.email != null && userInfo.password != null) { 
    (<FormControl>this.loginForm.controls['email']).setValue(userInfo.email); 
    (<FormControl>this.loginForm.controls['password']).setValue(userInfo.password); 
    } 
} 

getUserInfoFromStorage() { 
    return this._storage.ready() 
    .then(() => Promise.all([this._storage.get('email'), this._storage.get('password')]) 
    .then(array => { 
     return {email: array[0], password: array[1]}; 
    }); 
}