异步/等待类构造函数

目前，我正在尝试使用async/await在类构造函数中。这样我就可以定制e-mail我正在开发的 Electron 项目的标签。

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

有没有办法绕过这个问题，以便我可以在其中使用 async/await ？而不是需要回调或 .then()？

这个可以never work.

The async关键字允许await在标记为的函数中使用async但它也将该函数转换为承诺生成器。所以一个函数标记为async将返回一个承诺。另一方面，构造函数返回它正在构造的对象。因此，我们遇到了一种情况，您想要同时返回一个对象和一个承诺：这是一种不可能的情况。

您只能在可以使用 Promise 的地方使用 async/await，因为它们本质上是 Promise 的语法糖。不能在构造函数中使用 Promise，因为构造函数必须返回要构造的对象，而不是 Promise。

有两种设计模式可以克服这个问题，这两种模式都是在 Promise 出现之前发明的。

1. 使用init()功能。这有点像 jQuery 的工作原理.ready()。您创建的对象只能在其自己的内部使用init or ready功能：

Usage:

    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 中更常见的解决方法之一。当然，当构造一个需要大量复杂参数的对象时，就会使用构建器模式。这正是异步构建器的用例。不同之处在于，异步构建器不返回对象，而是返回该对象的承诺：

Usage:

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

    // with async/await:

    async function foo () {
        var myObj = await myClass.build();
    }

执行：

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

使用 async/await 实现：

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

注意：虽然在上面的示例中我们使用异步构建器的 Promise，但严格来说它们并不是必需的。您可以轻松编写接受回调的构建器。

关于在静态函数内调用函数的注意事项。

这与异步构造函数没有任何关系，但与关键字有关this实际上意味着（对于来自自动解析方法名称的语言的人来说，这可能有点令人惊讶，即不需要this关键词）。

The this关键字指的是实例化的对象。不是班级。因此你不能正常使用this在静态函数内，因为静态函数不绑定到任何对象，而是直接绑定到类。

也就是说，在下面的代码中：

class A {
    static foo () {}
}

你不能这样做：

var a = new A();
a.foo() // NOPE!!

相反，你需要将其称为：

A.foo();

因此，以下代码将导致错误：

class A {
    static foo () {
        this.bar(); // you are calling this as static
                    // so bar is undefinned
    }
    bar () {}
}

要修复它，你可以使bar常规函数或静态方法：

function bar1 () {}

class A {
    static foo () {
        bar1();   // this is OK
        A.bar2(); // this is OK
    }

    static bar2 () {}
}