如何在ngZone外运行async函数并解决await语法报错

错误原因 #

你遇到的报错是因为 await 关键字仅允许在被 async 标记的函数作用域内使用。你当前的 async 关键字只声明在了 ngAfterViewInit 方法上，而你传入 this.ngZone.runOutsideAngular 的回调函数是普通箭头函数，作用域独立，外层的 async 不会作用到这个回调内部，因此直接写 await 会触发语法错误。

正确实现 #

只需要给 runOutsideAngular 的回调函数加上 async 标记即可：

async ngAfterViewInit(): Promise<void> {
  this.ngZone.runOutsideAngular(async () => {
    await this.run();
  });
}

async run() { /* 你的业务逻辑 */ }

额外注意事项 #

如果你在 run 方法执行完成后需要更新Angular的视图数据，需要手动将更新逻辑放回Angular Zone内执行，否则Zone无法感知到状态变更，页面不会自动刷新：

async ngAfterViewInit(): Promise<void> {
  this.ngZone.runOutsideAngular(async () => {
    // 耗时的异步逻辑放在Zone外执行，避免触发不必要的变更检测
    const result = await this.run();
    // 视图更新逻辑放回Zone内
    this.ngZone.run(() => {
      this.pageData = result;
    });
  });
}

如果你需要在 ngAfterViewInit 中等待整个Zone外的异步逻辑执行完成再执行后续操作，可以用Promise包裹一层：

async ngAfterViewInit(): Promise<void> {
  await new Promise<void>((resolve) => {
    this.ngZone.runOutsideAngular(async () => {
      await this.run();
      resolve();
    });
  });
  // 此处逻辑会在run方法执行完成后才执行
  console.log('异步逻辑执行完毕');
}

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