如何在Angular服务中等待异步初始化，确保服务就绪后再使用？

方案一：利用Angular的APP_INITIALIZER钩子（阻塞应用启动直到初始化完成） #

这种方式会让应用在启动前先完成服务的异步初始化，确保任何地方注入该服务时，连接已经建立完毕。

步骤： #

1. 在服务中新增初始化方法，返回Promise：

@Injectable()
export class MyService {
  private connection: ConnectionType; // 替换为你的连接实际类型

  constructor(@Inject('CONFIG') private config: ConfigOptions) {}

  // 新增初始化方法
  init(): Promise<void> {
    return initConnection(this.config).then(conn => {
      this.connection = conn;
    });
  }

  send(payload: string) {
    this.connection.send(payload);
  }
}

2. 在NgModule中配置APP_INITIALIZER，注册服务的初始化逻辑：

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { MyService } from './my.service';

// 定义初始化工厂函数
function initializeMyService(myService: MyService) {
  return () => myService.init();
}

@NgModule({
  providers: [
    MyService,
    {
      provide: APP_INITIALIZER,
      useFactory: initializeMyService,
      deps: [MyService],
      multi: true // 支持同时注册多个初始化器
    }
  ]
})
export class AppModule {}

Angular会在应用启动前执行init()方法，只有当Promise resolve后，应用才会继续加载，后续注入MyService时可直接调用send方法。

方案二：服务内部维护初始化Promise（非阻塞启动，延迟执行方法） #

如果不想阻塞应用启动，可在服务内部维护一个初始化Promise，让所有对外方法等待初始化完成后再执行。

代码实现： #

@Injectable()
export class MyService {
  private connection: ConnectionType;
  private initPromise: Promise<void>; // 维护初始化状态的Promise

  constructor(@Inject('CONFIG') private config: ConfigOptions) {
    // 构造函数中启动初始化，但不阻塞
    this.initPromise = initConnection(this.config).then(conn => {
      this.connection = conn;
    });
  }

  async send(payload: string) {
    // 等待初始化完成后再执行发送逻辑
    await this.initPromise;
    this.connection.send(payload);
  }

  // 其他方法同样需要先等待初始化完成
  async fetchData() {
    await this.initPromise;
    return this.connection.fetch();
  }
}

这种方式下应用启动不会被阻塞，但第一次调用服务方法时会等待初始化完成，后续调用则直接执行。若担心重复初始化，可添加判断逻辑确保只执行一次初始化。

方案对比 #

• 方案一适合依赖初始化完成才能正常运行的核心服务，但会增加应用启动时间。
• 方案二更灵活，不阻塞启动，但需确保所有服务方法都正确等待初始化Promise，避免未初始化就调用的问题。

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