Angular 2 Promesse et refactoring

Question

Je viens de finir de lire Clean Code, et j'essaie de refactoriser mon code Angular 2 de sorte que chacune de mes fonctions fasse une chose comme cela est indiqué dans ce livre, mais j'ai du mal à l'obtenir travailler et je pense que cela se résume à un manque de compréhension des promesses en général. Ceci est ma version de travail actuelle de la méthode.

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) { 
    }); 
} 

J'ai essayé de transformer cette méthode unique en

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

Voici ma dernière tentative de ceux qui échoue. Je crois que la question est liée à quand ils sont appelés et quand ils terminent leurs promesses. Mon code de travail ci-dessus, je comprends parce que rien de la pré-population ne se passe qu'après chaque promesse, mais je me perds à obtenir la fonctionnalité appropriée lorsque je tente de les séparer. Si quelqu'un pouvait m'aider ici et j'espère expliquer conceptuellement ce qui me manque, j'apprécierais beaucoup.

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 [ 'mot de passe']) .SetValue (userInfo.password); } }

Answer 1

Vous devez d'abord comprendre l'asynchronisme. Vous ne pouvez pas renvoyer d'informations directement à partir d'une méthode asynchrone. Vous ne pouvez rendre qu'une promesse. Ensuite, vous pouvez combiner deux promesses en une en utilisant Promise.all().

Enfin, si vous appelez then() à l'intérieur d'un rappel passé à un premier then(), il y a un problème. Les promesses sont conçues pour éviter ce genre de pyramides de callbacks, en permettant de les aplatir.

Bien qu'il ait été écrit pour les promesses AngularJS, je vous conseille de lire this blog article I wrote, ce qui explique plusieurs des pièges dans lesquels vous êtes tombé.

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]}; 
    }); 
}