@slebetmen的公认答案很好地解释了为什么这行不通。除了答案中给出的两种模式之外，另一种选择是仅通过自定义异步getter访问您的异步属性。然后构造函数()可以触发属性的异步创建，但是getter在使用或返回属性之前检查属性是否可用。

当你想在启动后初始化一个全局对象，并且你想在一个模块中做这件事时，这种方法特别有用。而不是在index.js中初始化并将实例传递到需要它的地方，只需在需要全局对象的地方调用模块。

使用

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

实现

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

在构造函数中使用async方法?

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

根据您的注释，您可能应该做其他带有资产加载的HTMLElement所做的事情:使构造函数启动一个侧加载操作，根据结果生成一个加载或错误事件。

是的，这意味着使用承诺，但这也意味着“以与其他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 {
  connectedCallback() {
    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, use a promise:
    new Promise((resolve, reject) => {
      yourDataBase.getByUID(uid, (err, result) => {
        if (err) return reject(err);
        resolve(result);
      });
    })
    .then(result => {
      this.renderLoaded(result.message);
    })
    .catch(error => {
      this.renderError(error);
    });
  }
};

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

然后你让renderLoaded/renderError函数处理事件调用和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'));
  }

还要注意，我将id更改为一个类，因为除非您编写一些奇怪的代码，只允许页面上的<e-mail>元素的单个实例，否则您不能使用唯一标识符，然后将其分配给一堆元素。

这里有很多伟大的知识和一些超级()深思熟虑的回答。简而言之，下面概述的技术相当简单、非递归、异步兼容，并且遵循规则。更重要的是，我认为这里还没有正确地覆盖它-尽管如果错误请纠正我!

我们不调用方法，而是简单地将II(A)FE赋值给实例prop:

// it's async-lite!
class AsyncLiteComponent {
  constructor() {
    // our instance includes a 'ready' property: an IIAFE promise
    // that auto-runs our async needs and then resolves to the instance
    // ...
    // this is the primary difference to other answers, in that we defer
    // from a property, not a method, and the async functionality both
    // auto-runs and the promise/prop resolves to the instance
    this.ready = (async () => {
      // in this example we're auto-fetching something
      this.msg = await AsyncLiteComponent.msg;
      // we return our instance to allow nifty one-liners (see below)
      return this;
    })();
  }

  // we keep our async functionality in a static async getter
  // ... technically (with some minor tweaks), we could prefetch
  // or cache this response (but that isn't really our goal here)
  static get msg() {
    // yes I know - this example returns almost immediately (imagination people!)
    return fetch('data:,Hello%20World%21').then((e) => e.text());
  }
}

看起来很简单，怎么用呢?

// Ok, so you *could* instantiate it the normal, excessively boring way
const iwillnotwait = new AsyncLiteComponent();
// and defer your waiting for later
await iwillnotwait.ready
console.log(iwillnotwait.msg)

// OR OR OR you can get all async/awaity about it!
const onlywhenimready = await new AsyncLiteComponent().ready;
console.log(onlywhenimready.msg)

// ... if you're really antsy you could even "pre-wait" using the static method,
// but you'd probably want some caching / update logic in the class first
const prefetched = await AsyncLiteComponent.msg;

// ... and I haven't fully tested this but it should also be open for extension
class Extensior extends AsyncLiteComponent {
  constructor() {
    super();
    this.ready.then(() => console.log(this.msg))
  } 
}
const extendedwaittime = await new Extensior().ready;

在发帖之前，我在@slebetman的评论中对这种技术的可行性进行了简短的讨论。我并没有完全被这种直接的解雇所说服，所以我认为我应该进一步讨论/推翻它。请尽你最大的努力吧。

你完全可以通过从构造函数返回一个立即调用的Async函数表达式来做到这一点。IIAFE是一个非常常见的模式，在顶级await可用之前，需要在异步函数之外使用await:

(async () => {
  await someFunction();
})();

我们将使用此模式立即在构造函数中执行async函数，并返回其结果如下:

// Sample async function to be used in the async constructor async function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } class AsyncConstructor { constructor(value) { return (async () => { // Call async functions here await sleep(500); this.value = value; // Constructors return `this` implicitly, but this is an IIFE, so // return `this` explicitly (else we'd return an empty object). return this; })(); } } (async () => { console.log('Constructing...'); const obj = await new AsyncConstructor(123); console.log('Done:', obj); })();

要实例化类，使用:

const instance = await new AsyncConstructor(...);

对于TypeScript，你需要断言构造函数的类型是类类型，而不是返回类类型的promise:

class AsyncConstructor {
  constructor(value) {
    return (async (): Promise<AsyncConstructor> => {
      // ...
      return this;
    })() as unknown as AsyncConstructor;  // <-- type assertion
  }
}

缺点

使用异步构造函数扩展类会有限制。如果需要在派生类的构造函数中调用super，则必须在没有await的情况下调用它。如果你需要使用await调用超级构造函数，你会遇到TypeScript错误2337:超级调用不允许在构造函数外部或构造函数内部的嵌套函数中调用。 有人认为让构造函数返回Promise是一种“坏习惯”。

在使用此解决方案之前，确定是否需要扩展类，并记录必须使用await调用构造函数。

我根据@Downgoat的回答制作了这个测试用例。 它运行在NodeJS上。 这是Downgoat的代码，其中异步部分由setTimeout()调用提供。

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

我的用例是web应用程序服务器端的dao。 当我看到dao时，它们每个都关联到一个记录格式，在我的例子中是一个MongoDB集合，例如一个厨师。 cooksDAO实例保存厨师的数据。 在我不安的思绪中，我将能够实例化一个cook的DAO，并提供cookId作为参数，实例化将创建对象并使用cook的数据填充它。 因此需要在构造函数中运行异步的东西。 我想写:

let cook = new cooksDAO( '12345' );  

来拥有可用的属性，如cook.getDisplayName()。 有了这个解决方案，我必须做:

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

这和理想情况非常相似。 此外，我需要在一个异步函数中做到这一点。

我的b计划是把数据加载放在构造函数之外，基于@slebetman的建议使用init函数，并像这样做:

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

这并不违反规则。