Warum kann Async/Await nicht in JavaScript-Konstruktoren verwendet werden?

Asynchroner Aufruf innerhalb von Konstruktoren: Ein unmögliches Unterfangen

Asynchrone Programmierung mit async/await ist alltäglich geworden, aber ihre Anwendung innerhalb einer Konstruktorfunktion nimmt zu eine faszinierende Herausforderung. Betrachten Sie den folgenden Codeausschnitt:

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>Leider schlägt dieser Code mit der Fehlermeldung fehl:</p>
<blockquote>Der Klassenkonstruktor ist möglicherweise keine asynchrone Methode</blockquote>
<p>Der Grund dafür ist Grundlegend: Eine Konstruktorfunktion ist für die Initialisierung und Rückgabe einer Objektinstanz verantwortlich. Das Schlüsselwort async wandelt jedoch eine Funktion in einen Promise-Generator um, was dazu führt, dass die Funktion ein Promise anstelle des Objekts selbst zurückgibt. Dadurch entsteht ein inhärenter Konflikt.</p>
<p><strong>Enthüllung der Unmöglichkeit</strong></p>
<p>Das Missverständnis ergibt sich aus der wahrgenommenen Ähnlichkeit zwischen Async/Warten und Versprechen. Während async/await syntaktischen Zucker für die Arbeit mit Versprechen liefert, ändert es nicht das zugrunde liegende Verhalten. Versprechen stellen asynchrone Operationen dar, die entweder aufgelöst oder abgelehnt werden, um einen Wert zu erzeugen.</p>
<p>Im Gegensatz dazu muss eine Konstruktorfunktion das Objekt zurückgeben, das erstellt wird. Diese unveränderliche Anforderung kann nicht mit dem vielversprechenden Verhalten einer asynchronen Funktion in Einklang gebracht werden.</p>
<p><strong>Workaround-Strategien</strong></p>
<p>Um diese Einschränkung zu überwinden, sollten Sie die Verwendung eines der folgenden Entwurfsmuster in Betracht ziehen :</p>
<ol><li>
<strong>Initialisierungsfunktion (init())</strong>: Einführen eine Initialisierungsfunktion zum Ausführen asynchroner Aufgaben. Die Objektinstanz kann nur innerhalb dieser Funktion verwendet werden.</li></ol>
<pre class="brush:php;toolbar:false">var myObj = new myClass();
myObj.init(function() {
    // inside here you can use myObj
});

2. Builder-Muster: Anstatt den Konstruktor direkt aufzurufen, verwenden Sie eine Builder-Funktion, um ein Objekt zu erstellen Beispiel. Die Builder-Funktion gibt ein Versprechen zurück, das in die Objektinstanz aufgelöst wird, sobald alle asynchronen Aufgaben abgeschlossen sind.

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

Beachten Sie, dass in den obigen Beispielen zwar Versprechen im Builder-Muster verwendet werden, aber auch Rückrufe verwendet werden können.

Überlegungen zu statischen Funktionen

Es ist wichtig zu beachten, dass das Schlüsselwort this innerhalb statischer Funktionen dies tut beziehen sich nicht auf das instanziierte Objekt, sondern auf die Klasse selbst. Daher können Sie Methoden nicht direkt innerhalb statischer Funktionen aufrufen. Verweisen Sie stattdessen auf Methoden mithilfe des Klassennamens oder deklarieren Sie sie als statische Methoden.