JavaScript コンストラクターで Async/Await を使用できないのはなぜですか?

コンストラクター内での非同期呼び出し: 不可能な試み

async/await を使用した非同期プログラミングは一般的になりましたが、コンストラクター関数内でのその適用は興味深い挑戦です。次のコード スニペットを考えてみましょう:

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>
<p>残念ながら、このコードは次のエラー メッセージで失敗します:</p>
<blockquote>クラス コンストラクターは非同期メソッドである可能性があります</blockquote>
<p>その理由は次のとおりです。基本: コンストラクター関数は、オブジェクト インスタンスを初期化して返す役割を果たします。ただし、async キーワードは関数を Promise ジェネレーターに変換するため、関数はオブジェクト自体ではなく Promise を返します。これにより、固有の矛盾が生じます。</p>
<p><strong>不可能性を明らかにする</strong></p>
<p>誤解は、async/await と Promise の間に認識されている類似性から生じます。 async/await は、Promise を操作するための糖衣構文を提供しますが、基礎となる動作は変更しません。 Promise は、解決または拒否して値を生成する非同期操作を表します。</p>
<p>対照的に、コンストラクター関数は構築中のオブジェクトを返す必要があります。この不変の要件は、非同期関数の Promise 生成動作と調和させることができません。</p>
<p><strong>回避策</strong></p>
<p>この制限を克服するには、次の設計パターンのいずれかの採用を検討してください。 :</p>
<ol><li>
<strong>初期化関数(init())</strong>: 非同期タスクを実行するための初期化関数を導入します。オブジェクト インスタンスは、この関数内でのみ使用できます。</li></ol>
<pre class="brush:php;toolbar:false">var myObj = new myClass();
myObj.init(function() {
    // inside here you can use myObj
});

2. ビルダー パターン: コンストラクターを直接呼び出す代わりに、ビルダー関数を使用してオブジェクトを作成します。実例。ビルダー関数は、すべての非同期タスクが完了すると、オブジェクト インスタンスに解決される Promise を返します。

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

上記の例ではビルダー パターンで Promise を使用していますが、コールバックも使用できることに注意してください。

静的関数の考慮事項

重要です静的関数内の this キーワードは、インスタンス化されたオブジェクトを参照するのではなく、クラス自体を参照することに注意してください。したがって、静的関数内でメソッドを直接呼び出すことはできません。代わりに、クラス名を使用してメソッドを参照するか、静的メソッドとして宣言してください。