Angular 12使用html2canvas时如何通过async/await等待执行完成后运行后续方法

步骤1：改造part1方法，返回异步执行结果 #

需要先让part1把内部的异步操作暴露出来，外部才能感知到它的执行完成状态，两种常用写法均可：

• 直接返回Promise实例

part1(): Promise<void> {
  const element = document.getElementById("capture") as HTMLCanvasElement;
  return html2canvas(element).then((canvas) => {
    this.thecanvas = canvas.toDataURL();
    console.log('Dont do part2 until the.thecanvas is populated');
  });
}

• 用async语法改造，写法更简洁

async part1(): Promise<void> {
  const element = document.getElementById("capture") as HTMLCanvasElement;
  const canvas = await html2canvas(element);
  this.thecanvas = canvas.toDataURL();
  console.log('Dont do part2 until the.thecanvas is populated');
}

步骤2：改造main方法，用await等待执行 #

给main方法加上async修饰符，调用part1前加await关键字即可：

async main(): Promise<void> {
    await this.part1(); // 等待part1完全执行完成
    this.part2(); // 再执行part2
}

注意事项 #

• 如果main是绑定到页面事件（比如按钮点击）的处理函数，直接加async修饰符即可正常使用，Angular 12完全支持该写法。
• 如果需要处理part1的执行异常，可以给await调用套上try/catch块捕获错误。

内容的提问来源于stack exchange，提问作者deszok