Construtor de classe assíncrona / em espera

No momento, estou tentando usar async/awaitdentro de uma função de construtor de classe. Isso é para que eu possa obter uma e-mailtag personalizada para um projeto da Electron em que estou trabalhando.

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

No momento, no entanto, o projeto não funciona, com o seguinte erro:

Class constructor may not be an async method

Existe uma maneira de contornar isso para que eu possa usar assíncrono / aguardar dentro disso? Em vez de exigir retornos de chamada ou .then ()?

Isso nunca pode funcionar.

A asyncpalavra-chave permite awaitser usada em uma função marcada como asyncmas também converte essa função em um gerador de promessa. Portanto, uma função marcada com asyncretornará uma promessa. Um construtor, por outro lado, retorna o objeto que está construindo. Portanto, temos uma situação em que você deseja retornar um objeto e uma promessa: uma situação impossível.

Você só pode usar async / waitit onde você pode usar promessas, porque elas são essencialmente sintaxe para promessas. Você não pode usar promessas em um construtor porque um construtor deve retornar o objeto a ser construído, não uma promessa.

Existem dois padrões de design para superar isso, ambos inventados antes das promessas.

1. Uso de uma init()função. Isso funciona um pouco como o jQuery .ready(). O objeto que você cria pode ser usado apenas dentro de sua própria função initou readyfunção:

   Uso:

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

   Implementação:

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

2. Use um construtor. Não vi isso muito usado em javascript, mas essa é uma das soluções mais comuns em Java quando um objeto precisa ser construído de forma assíncrona. Obviamente, o padrão do construtor é usado ao construir um objeto que requer muitos parâmetros complicados. Qual é exatamente o caso de uso para construtores assíncronos. A diferença é que um construtor assíncrono não retorna um objeto, mas uma promessa desse objeto:

   Uso:

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

   Implementação:

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

   Implementação com async / waitit:

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

Nota: embora nos exemplos acima usemos promessas para o construtor assíncrono, elas não são estritamente necessárias. Você pode facilmente escrever um construtor que aceite um retorno de chamada.

Nota sobre como chamar funções dentro de funções estáticas.

Isso não tem nada a ver com construtores assíncronos, mas com o que a palavra-chave thisrealmente significa (o que pode ser um pouco surpreendente para pessoas provenientes de linguagens que resolvem automaticamente nomes de métodos, ou seja, linguagens que não precisam da thispalavra - chave).

A thispalavra-chave refere-se ao objeto instanciado. Não é da turma. Portanto, você normalmente não pode usar thisfunções estáticas internas, pois a função estática não está vinculada a nenhum objeto, mas diretamente à classe.

Ou seja, no seguinte código:

class A {
    static foo () {}
}

Você não pode fazer:

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

em vez disso, você precisa chamá-lo como:

A.foo();

Portanto, o código a seguir resultaria em um erro:

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

Para corrigi-lo, você pode criar baruma função regular ou um método estático:

function bar1 () {}

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

    static bar2 () {}
}

Você pode definitivamente fazer isso. Basicamente:

class AsyncConstructor {
    constructor() {
        return (async () => {

            // All async code here
            this.value = await asyncFunction();

            return this; // when done
        })();
    }
}

para criar a classe use:

let instance = await new AsyncConstructor();

Esta solução tem algumas quedas curtas:

superNota : Se você precisar usar super, não poderá chamá-lo no retorno de chamada assíncrono.

Nota do TypeScript: isso causa problemas com o TypeScript porque o construtor retorna o tipo em Promise<MyClass>vez de MyClass. Não há maneira definitiva de resolver isso que eu saiba. Uma maneira potencial sugerida pelo @blitter é colocar /** @type {any} */no início do corpo do construtor - não sei se isso funciona em todas as situações.

Como as funções assíncronas são promessas, você pode criar uma função estática em sua classe que execute uma função assíncrona que retorne a instância da classe:

class Yql {
  constructor () {
    // Set up your class
  }

  static init () {
    return (async function () {
      let yql = new Yql()
      // Do async stuff
      await yql.build()
      // Return instance
      return yql
    }())
  }  

  async build () {
    // Do stuff with await if needed
  }
}

async function yql () {
  // Do this instead of "new Yql()"
  let yql = await Yql.init()
  // Do stuff with yql instance
}

yql()

Ligue com let yql = await Yql.init()uma função assíncrona.

Com base nos seus comentários, você provavelmente deve fazer o que todos os outros HTMLElement com carregamento de ativos fazem: fazer com que o construtor inicie uma ação de carregamento lateral, gerando um evento de carga ou erro, dependendo do resultado.

Sim, isso significa usar promessas, mas também significa "fazer as coisas da mesma maneira que qualquer outro elemento HTML", para que você esteja em boa companhia. Por exemplo:

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

isso inicia uma carga assíncrona do ativo de origem que, quando é bem-sucedida, termina onloade quando dá errado, termina onerror. Portanto, faça sua própria classe fazer isso também:

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

E então você faz as funções renderLoaded / renderError lidar com as chamadas de evento e o shadow 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', ...));
  }

Observe também que eu mudei seu idpara a class, porque, a menos que você escreva algum código estranho para permitir apenas uma única instância do seu <e-mail>elemento em uma página, não será possível usar um identificador exclusivo e atribuí-lo a vários elementos.

Fiz esse caso de teste com base na resposta de @ Downgoat.
É executado no NodeJS. Este é o código do Downgoat onde a parte assíncrona é fornecida por uma setTimeout()chamada.

'use strict';
const util = require( 'util' );

class AsyncConstructor{

  constructor( lapse ){
    this.qqq = 'QQQ';
    this.lapse = lapse;
    return ( async ( lapse ) => {
      await this.delay( lapse );
      return this;
    })( lapse );
  }

  async delay(ms) {
    return await new Promise(resolve => setTimeout(resolve, ms));
  }

}

let run = async ( millis ) => {
  // Instatiate with await, inside an async function
  let asyncConstructed = await new AsyncConstructor( millis );
  console.log( 'AsyncConstructor: ' + util.inspect( asyncConstructed ));
};

run( 777 );

Meu caso de uso é DAOs para o lado do servidor de um aplicativo Web.
Pelo que vejo DAOs, cada um deles está associado a um formato de registro, no meu caso, uma coleção do MongoDB como, por exemplo, um cozinheiro.
Uma instância cooksDAO mantém os dados de um cozinheiro.
Em minha mente inquieta, eu seria capaz de instanciar o DAO de um cozinheiro, fornecendo o cookId como argumento, e a instanciação criaria o objeto e o preencheria com os dados do cozinheiro.
Daí a necessidade de executar coisas assíncronas no construtor.
Eu queria escrever:

let cook = new cooksDAO( '12345' );  

ter propriedades disponíveis como cook.getDisplayName().
Com esta solução, tenho que fazer:

let cook = await new cooksDAO( '12345' );  

que é muito parecido com o ideal.
Além disso, eu preciso fazer isso dentro de uma asyncfunção.

Meu plano B era deixar os dados carregados fora do construtor, com base na sugestão de @slebetman para usar uma função init, e fazer algo assim:

let cook = new cooksDAO( '12345' );  
async cook.getData();

o que não quebra as regras.

usar método assíncrono na construção ???

constructor(props) {
    super(props);
    (async () => await this.qwe(() => console.log(props), () => console.log(props)))();
}

async qwe(q, w) {
    return new Promise((rs, rj) => {
        rs(q());
        rj(w());
    });
}

A solução paliativa

Você pode criar um async init() {... return this;}método e, em vez disso, new MyClass().init()sempre que você normalmente diznew MyClass() .

Isso não é limpo, pois depende de todos que usam seu código e a você mesmo para sempre instanciar o objeto dessa maneira. No entanto, se você estiver usando apenas esse objeto em um ou dois lugares específicos no seu código, talvez esteja correto.

Um problema significativo ocorre porque o ES não possui um sistema de tipos. Portanto, se você esquecer de chamá-lo, retornará undefined porque o construtor não retornará nada. Opa Muito melhor seria fazer algo como:

A melhor coisa a fazer seria:

class AsyncOnlyObject {
    constructor() {
    }
    async init() {
        this.someField = await this.calculateStuff();
    }

    async calculateStuff() {
        return 5;
    }
}

async function newAsync_AsyncOnlyObject() {
    return await new AsyncOnlyObject().init();
}

newAsync_AsyncOnlyObject().then(console.log);
// output: AsyncOnlyObject {someField: 5}

A solução do método de fábrica (um pouco melhor)

No entanto, você pode acidentalmente executar o novo AsyncOnlyObject; provavelmente, você deve apenas criar uma função de fábrica que use Object.create(AsyncOnlyObject.prototype)diretamente:

async function newAsync_AsyncOnlyObject() {
    return await Object.create(AsyncOnlyObject.prototype).init();
}

newAsync_AsyncOnlyObject().then(console.log);
// output: AsyncOnlyObject {someField: 5}

No entanto, digamos que você queira usar esse padrão em muitos objetos ... você pode abstraí-lo como um decorador ou algo que você chamará depois de definir como postProcess_makeAsyncInit(AsyncOnlyObject), mas aqui eu vou usar extendsporque ele se encaixa na semântica da subclasse (as subclasses são classe pai + extra, pois devem obedecer ao contrato de design da classe pai e podem fazer coisas adicionais; uma subclasse assíncrona seria estranha se o pai também não fosse assíncrono, porque não poderia ser inicializado da mesma forma maneira):

Solução abstraída (versão estendida / subclasse)

class AsyncObject {
    constructor() {
        throw new Error('classes descended from AsyncObject must be initialized as (await) TheClassName.anew(), rather than new TheClassName()');
    }

    static async anew(...args) {
        var R = Object.create(this.prototype);
        R.init(...args);
        return R;
    }
}

class MyObject extends AsyncObject {
    async init(x, y=5) {
        this.x = x;
        this.y = y;
        // bonus: we need not return 'this'
    }
}

MyObject.anew('x').then(console.log);
// output: MyObject {x: "x", y: 5}

(não use na produção: não pensei em cenários complicados, como se essa é a maneira correta de escrever um wrapper para argumentos de palavras-chave.)

Ao contrário de outros, você pode fazê-lo funcionar.

JavaScript classes pode retornar literalmente qualquer coisa deles constructor, mesmo uma instância de outra classe. Portanto, você pode retornar um Promisedo construtor de sua classe que resolve para sua instância real.

Abaixo está um exemplo:

export class Foo {

    constructor() {

        return (async () => {

            // await anything you want

            return this; // Return the newly-created instance
        }).call(this);
    }
}

Em seguida, você criará instâncias Foodessa maneira:

const foo = await new Foo();

Se você puder evitar extend , evite as classes juntas e use a composição de funções como construtores . Você pode usar as variáveis ​​no escopo em vez dos membros da classe:

async function buildA(...) {
  const data = await fetch(...);
  return {
    getData: function() {
      return data;
    }
  }
}

e simples usá-lo como

const a = await buildA(...);

Se você estiver usando texto datilografado ou fluxo, poderá aplicar a interface dos construtores

Interface A {
  getData: object;
}

async function buildA0(...): Promise<A> { ... }
async function buildA1(...): Promise<A> { ... }
...

Variação no padrão do construtor, usando call ():

function asyncMethod(arg) {
    function innerPromise() { return new Promise((...)=> {...}) }
    innerPromise().then(result => {
        this.setStuff(result);
    }
}

const getInstance = async (arg) => {
    let instance = new Instance();
    await asyncMethod.call(instance, arg);
    return instance;
}

Você pode chamar imediatamente uma função assíncrona anônima que retorne uma mensagem e defina-a como a variável de mensagem. Você pode dar uma olhada nas expressões de função invocadas imediatamente (IEFES), caso não esteja familiarizado com esse padrão. Isso funcionará como um encanto.

var message = (async function() { return await grabUID(uid) })()

A resposta aceita do @ slebetmen explica bem por que isso não funciona. Além dos dois padrões apresentados nessa resposta, outra opção é acessar apenas as propriedades assíncronas por meio de um getter assíncrono personalizado. O construtor () pode acionar a criação assíncrona das propriedades, mas o getter verifica se a propriedade está disponível antes de usá-la ou devolvê-la.

Essa abordagem é particularmente útil quando você deseja inicializar um objeto global uma vez na inicialização e deseja fazê-lo dentro de um módulo. Em vez de inicializar no seu index.jse passar a instância nos locais que precisam, bastarequire seu módulo onde quer que o objeto global seja necessário.

Uso

const instance = new MyClass();
const prop = await instance.getMyProperty();

Implementação

class MyClass {
  constructor() {
    this.myProperty = null;
    this.myPropertyPromise = this.downloadAsyncStuff();
  }
  async downloadAsyncStuff() {
    // await yourAsyncCall();
    this.myProperty = 'async property'; // this would instead by your async call
    return this.myProperty;
  }
  getMyProperty() {
    if (this.myProperty) {
      return this.myProperty;
    } else {
      return this.myPropertyPromise;
    }
  }
}

As outras respostas estão faltando o óbvio. Simplesmente chame uma função assíncrona do seu construtor:

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>
    `
}

Você deve adicionar uma thenfunção à instância. Promiseirá reconhecê-lo como um objeto thenable com Promise.resolveautomaticamente

const asyncSymbol = Symbol();
class MyClass {
    constructor() {
        this.asyncData = null
    }
    then(resolve, reject) {
        return (this[asyncSymbol] = this[asyncSymbol] || new Promise((innerResolve, innerReject) => {
            this.asyncData = { a: 1 }
            setTimeout(() => innerResolve(this.asyncData), 3000)
        })).then(resolve, reject)
    }
}

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