Angular中ngOnInit用async/await为何不阻塞生命周期钩子？

这是因为Angular的生命周期钩子调用是同步触发的，它不会等待某个钩子内的异步操作完成，才继续执行后续钩子，而async/await本质是Promise的语法糖，并不会改变JavaScript的异步执行机制。

具体到你的代码：

• 当Angular调用async ngOnInit()时，函数执行到await this.loginservice.availabilities(...).toPromise()这一行，会暂停当前函数的执行，把控制权交回给Angular的主线程。
• Angular不会等待这个异步请求完成，而是继续按生命周期顺序执行后续钩子，也就是ngAfterViewInit()，所以控制台先输出Call ngAfterViewInit。
• 只有当异步请求的Promise状态变为resolved时，JavaScript引擎才会回到ngOnInit()中，继续执行await之后的代码，此时才会输出no of units。

另外要注意：RxJS的toPromise()已经被弃用，建议改用firstValueFrom或lastValueFrom来转换Observable为Promise。

如果你的业务逻辑需要依赖异步请求返回的数据，且要在视图初始化后执行相关操作，不要依赖生命周期钩子的顺序等待，而是应该把逻辑放在await之后，或者通过RxJS的订阅回调来处理，比如：

import { firstValueFrom } from 'rxjs';

async ngOnInit() {
  const response = await firstValueFrom(this.loginservice.availabilities(this._searchinfo));
  console.log("no of units");
  // 在这里处理依赖response的视图逻辑，比如更新组件属性触发变更检测
}

或者用订阅的方式：

ngOnInit() {
  this.loginservice.availabilities(this._searchinfo).subscribe({
    next: (response) => {
      console.log("no of units");
      // 处理数据相关逻辑
    }
  });
}

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