Invocation asynchrone dans les constructeurs: une entreprise impossible

Une programmation asynchrone à l'aide d'Async / Await est devenue courante, mais son application au sein d'une fonction constructeur soulève un défi intrigant. Considérez l'extrait de code suivant:

customElements.define('e-mail', class extends HTMLElement {
  async constructor() {
    super()

    let uid = this.getAttribute('data-uid')
    let message = await grabUID(uid)

    const shadowRoot = this.attachShadow({mode: 'open'})
    shadowRoot.innerHTML = `
      
 
 Malheureusement, ce code échoue avec le message d'erreur: 
 
 Le constructeur de classe peut ne pas être une méthode asynchrone 
 
 La raison en est fondamentale: une fonction de constructeur est responsable de l'initialisation et du renvoi d'une instance d'objet. Cependant, le mot-clé asynchronisé convertit une fonction en un générateur de promesses, ce qui donne la fonction renvoyant une promesse au lieu de l'objet lui-même. Cela crée un conflit inhérent. 
 
  dévoiler l'impossibilité  
 
 l'idée fausse découle de la similitude perçue entre async / attendre et promettre. Bien qu'Async / Await fournit du sucre syntaxique pour travailler avec les promesses, il ne modifie pas le comportement sous-jacent. Les promesses représentent des opérations asynchrones qui résolvent ou rejettent à produire une valeur. 
 
 En revanche, une fonction de constructeur doit renvoyer l'objet qui est construit. Cette exigence immuable ne peut pas être réconciliée avec le comportement produisant une promesse d'une fonction asynchrone. fonction pour effectuer des tâches asynchrones. L'instance d'objet ne peut être utilisée que dans cette fonction. 
 
  var myobj = new myClass ();
myobj.init (function () {
    // à l'intérieur ici, vous pouvez utiliser myobj
});  
 
 
 modèle de builder 
: Au lieu d'appeler directement le constructeur, utilisez une fonction de générateur pour créer une instance d'objet. La fonction Builder renvoie une promesse qui résout à l'instance d'objet une fois que toutes les tâches asynchrones sont complètes. 
   myclass.build (). Puis (fonction (myoBj) {
    // myobj est retourné par la promesse, pas par le constructeur ou le constructeur
});

// avec async / attendre:
fonction asynchrone foo () {
    var myoBj = attendre myClass.build ();
} 
 
 Notez que bien que les exemples ci-dessus utilisent les promesses dans le modèle du générateur, les rappels peuvent également être utilisés. Par conséquent, vous ne pouvez pas appeler des méthodes directement dans les fonctions statiques. Au lieu de cela, reportez-vous aux méthodes en utilisant le nom de classe ou déclarez-les comme des méthodes statiques.