异步/等待类构造函数

Question

此刻，我试图在类构造函数中使用async/await。这样我就可以为我正在进行的Electron项目获得自定义e-mail标签。

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 = ` 
     <div id="email">A random email message has appeared. ${message}</div> 
    ` 
    } 
}) 

但是在此刻，该项目无法正常工作，并出现以下错误：

Class constructor may not be an async method 

是否有办法规避，这样我可以在此使用异步/ AWAIT？而不是要求回调或.then（）？

Answer 1

这可以从来没有工作。

async关键字允许await用于标记为async的功能，但它也将该功能转换为承诺生成器。所以标有async的函数将返回一个承诺。另一方面，构造函数返回它正在构造的对象。因此，我们有一种情况，你想要返回一个对象和一个承诺：一个不可能的情况。

您只能使用async/await在哪里使用promise，因为它们本质上是承诺的语法糖。您不能在构造函数中使用promise，因为构造函数必须返回要构造的对象，而不是承诺。

有两种设计模式可以解决这个问题，这两种设计模式都是在承诺前发明的。

1. 使用init()功能。这有点像jQuery的.ready()。您创建的对象只能是自己的init或ready函数内部使用：

   用法：

   var myObj = new myClass(); 
   myObj.init(function() { 
       // inside here you can use myObj 
   }); 
   

   实现：

   class myClass { 
       constructor() { 
   
       } 
   
       init (callback) { 
        // do something async and call the callback: 
        callback.bind(this)(); 
       } 
   } 
   

2. 使用建设者。我没有看到这在JavaScript中使用过很多，但是当一个对象需要异步构建时，这是Java中更常见的解决方法之一。当然，构建器模式在构建需要大量复杂参数的对象时使用。这正是异步构建器的用例。不同的是，一个异步建设者不返回一个对象，但该对象的承诺：

   用法：

   myClass.build().then(function(myObj) { 
       // myObj is returned by the promise, 
       // not by the constructor 
       // or builder 
   }); 
   

   实现：

   class myClass { 
       constructor (async_param) { 
        if (typeof async_param === 'undefined') { 
         throw new Error('Cannot be called directly'); 
        } 
       } 
   
       static build() { 
        return doSomeAsyncStuff() 
         .then(function(async_result){ 
          return new myClass(async_result); 
         }); 
       } 
   } 
   

   实现与异步/等待：

   class myClass { 
       constructor (async_param) { 
        if (typeof async_param === 'undefined') { 
         throw new Error('Cannot be called directly'); 
        } 
       } 
   
       static async build() { 
        var async_result = await doSomeAsyncStuff(); 
        return new myClass(async_result); 
       } 
   } 
   

Note: although in the examples above we use promises for the async builder they are not strictly speaking necessary. You can just as easily write a builder that accept a callback.

Answer 2

根据你的意见，你可能应该做任何其他HTMLElement的资产加载：做构造函数启动一个sideloading动作，根据结果产生一个负载或错误事件。

是的，这意味着使用承诺，但它也意味着“以与其他HTML元素相同的方式进行操作”，因此您身处公司。例如：

var img = new Image(); 
img.onload = function(evt) { ... } 
img.addEventListener("load", evt => ...); 
img.onerror = function(evt) { ... } 
img.addEventListener("error", evt => ...); 
img.src = "some url"; 

此序幕源资产的是，当它成功，在onload结束，当它出了毛病，在onerror结束的异步负载。所以，让自己的类就此别过：

class EMailElement extends HTMLElement { 
    constructor() { 
    super(); 
    this.uid = this.getAttribute('data-uid'); 
    } 

    setAttribute(name, value) { 
    super.setAttribute(name, value); 
    if (name === 'data-uid') { 
     this.uid = value; 
    } 
    } 

    set uid(input) { 
    if (!input) return; 
    const uid = parseInt(input); 
    // don't fight the river, go with the flow 
    let getEmail = new Promise((resolve, reject) => { 
     yourDataBase.getByUID(uid, (err, result) => { 
     if (err) return reject(err); 
     resolve(result); 
     }); 
    }); 
    // kick off the promise, which will be async all on its own 
    getEmail() 
    .then(result => { 
     this.renderLoaded(result.message); 
    }) 
    .catch(error => { 
     this.renderError(error); 
    }); 
    } 
}; 

customElements.define('e-mail', EmailElement); 

然后你让renderLoaded/renderError功能处理事件调用和阴影DOM：

renderLoaded(message) { 
    const shadowRoot = this.attachShadow({mode: 'open'}); 
    shadowRoot.innerHTML = ` 
     <div class="email">A random email message has appeared. ${message}</div> 
    `; 
    // is there an ancient event listener? 
    if (this.onload) { 
     this.onload(...); 
    } 
    // there might be modern event listeners. dispatch an event. 
    this.dispatchEvent(new Event('load', ...)); 
    } 

    renderFailed() { 
    const shadowRoot = this.attachShadow({mode: 'open'}); 
    shadowRoot.innerHTML = ` 
     <div class="email">No email messages.</div> 
    `; 
    // is there an ancient event listener? 
    if (this.onload) { 
     this.onerror(...); 
    } 
    // there might be modern event listeners. dispatch an event. 
    this.dispatchEvent(new Event('error', ...)); 
    } 

另外请注意，我改变你的id到class，因为除非您编写一些奇怪的代码，以便在页面上只允许单个实例的<e-mail>元素，否则不能使用唯一标识符，然后将其分配给一组元素。

Answer 3

您还可以创建在构造函数自动执行的异步匿名函数：

class MyClass { 
    constructor() { 
     (async() => { 
      let result = await foo(); 
      this.someProperty = result; 
      console.log(this.someProperty);// outputs: bar 
     })(); 
    } 
} 

function foo() { 
    return new Promise((resolve, reject) => { 
     setTimeout(() => resolve('bar'), 2000); 
    }); 
} 

new MyClass(); 

Answer 4

您应该添加then函数实例。 Promise将其识别为一个thenable对象与Promise.resolve自动

const asyncSymbol = Symbol(); 
class MyClass { 
    constructor() { 
    // nothing to do with constructor 
    } 
    then(resolve, reject) { 
     return (this[asyncSymbol] = this[asyncSymbol] || new Promise((innerResolve, innerReject) => { 
      setTimeout(() => innerResolve(this), 3000) 
     })).then(resolve, reject) 
    } 
} 

async function wait() { 
    const myInstance = await new MyClass(); 
    alert('run 3s later') 
} 

Answer 5

其他的答案缺少明显。只需拨打一个异步函数从你的构造：

constructor() { 
    setContentAsync(); 
} 

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

    const shadowRoot = this.attachShadow({mode: 'open'}) 
    shadowRoot.innerHTML = ` 
     <div id="email">A random email message has appeared. ${message}</div> 
    ` 
}