typescript 类 : How to initialize variables that require multiple promises?

Question

我的目标是在构造函数内初始化“page”变量。问题是我无法在构造函数内执行 make async/await promise 。 所以我的思考过程是“哦，只需在类内部创建一个方法，然后在构造函数内部调用它。”但当然，我错了。 Typescript 仍然对我大喊大叫，说页面没有被明确初始化。事实上，如果没有异步/等待，我无法在浏览器变量上调用“newPage()”方法。 我该如何解决这个问题？ 感谢您提前抽出时间。

class Puppet {
  private page: puppeteer.Page;
  
  contructor() {
    this.initialize();
  }

  async initialize(){
    const browser = await puppeteer.launch({headless:true});
    this.page = await browser.newPage();
    await this.page.goto(this.url);
  }
}

Answer 1

在调用方法中，首先创建对象，然后调用 initialize() 函数:

class Puppet {
  private page!: puppeteer.Page;

  async initialize(){
    const browser = await puppeteer.launch({headless:true});
    this.page = await browser.newPage();
    await this.page.goto(this.url);
  }
}

// ... in some async function
const puppet = new Puppet();
await puppet.initialize();

如果您想让这更方便一点，请添加异步工厂函数:

class Puppet {
  private page!: puppeteer.Page;

  async #initialize(){
    const browser = await puppeteer.launch({headless:true});
    this.page = await browser.newPage();
    await this.page.goto(this.url);
  }

  static async create() {
      const puppet = new Puppet();
      await puppet.#initialize();
      return puppet;
  }
}

// ... in some async function
const puppet = await Puppet.create();

这还允许您将初始化隐藏在私有(private)函数中。