Angular 5中如何在Observable异步操作完成后执行后续方法

这个问题确实是典型的异步操作顺序问题——你调用init()后马上执行userAccessPanel()，但forkJoin里的HTTP请求还没完成，所以grants还没被赋值，自然是undefined。下面给你两种常用的解决思路：

方法一：让init()返回Observable，组件订阅后执行后续逻辑 #

修改PageService的init()方法，让它返回forkJoin的Observable，这样组件可以在请求完成的回调里执行userAccessPanel()：

@Injectable()
export class PageService {
  constructor(private configService: ConfigService, private authService: AuthService) { }
  config: AppConfig;
  auth: Auth;
  grants: Grants;

  // 修改方法，返回Observable
  init(): Observable<[AppConfig, Auth, Grants]> {
    return Observable.forkJoin(
      this.configService.init(),
      this.authService.init(),
      this.authService.grants()
    ).pipe(
      // 用tap操作符保存数据到服务属性
      tap(data => {
        this.config = data[0];
        this.auth = data[1];
        this.grants = data[2];
        // 日志
        console.log(this.config);
        console.log(this.auth);
        console.log(this.grants);
      })
    );
  }
}

然后在组件中，订阅init()的返回值，在回调里执行userAccessPanel()：

export class DashboardComponent implements OnInit {
  columns: any[];
  constructor(private pageService: PageService) { }

  ngOnInit() {
    this.pageService.init().subscribe({
      next: () => this.userAccessPanel(),
      error: (err) => console.error('初始化失败', err) // 别忘了处理错误
    });
  }

  userAccessPanel = () => {
    console.log('Grant : ', this.pageService.grants);
  }
}

如果你习惯用async/await，也可以把ngOnInit改成异步方法：

async ngOnInit() {
  try {
    await this.pageService.init().toPromise();
    this.userAccessPanel();
  } catch (err) {
    console.error('初始化失败', err);
  }
}

方法二：用Subject发布初始化完成事件 #

如果你的应用中有多个组件需要监听初始化完成的状态，可以在PageService里用Subject来发布事件：

@Injectable()
export class PageService {
  constructor(private configService: ConfigService, private authService: AuthService) { }
  config: AppConfig;
  auth: Auth;
  grants: Grants;
  // 创建Subject来通知初始化完成
  private initializedSubject = new Subject<void>();
  // 对外暴露可观察对象，防止外部调用next方法
  initialized$ = this.initializedSubject.asObservable();

  init() {
    Observable.forkJoin(
      this.configService.init(),
      this.authService.init(),
      this.authService.grants()
    ).subscribe({
      next: data => {
        this.config = data[0];
        this.auth = data[1];
        this.grants = data[2];
        // 日志
        console.log(this.config);
        console.log(this.auth);
        console.log(this.grants);
        // 通知所有订阅者初始化完成
        this.initializedSubject.next();
        this.initializedSubject.complete(); // 完成后关闭Subject，避免内存泄漏
      },
      error: err => {
        this.initializedSubject.error(err);
      }
    });
  }
}

组件中订阅初始化完成事件：

export class DashboardComponent implements OnInit {
  columns: any[];
  constructor(private pageService: PageService) { }

  ngOnInit() {
    this.pageService.init();
    this.pageService.initialized$.subscribe({
      next: () => this.userAccessPanel(),
      error: (err) => console.error('初始化失败', err)
    });
  }

  userAccessPanel = () => {
    console.log('Grant : ', this.pageService.grants);
  }
}

核心原理就是：异步操作的结果只能在它的回调/订阅逻辑中安全获取，不能在调用异步方法后立即同步获取结果，这是JavaScript异步编程的基础规则。

内容的提问来源于stack exchange，提问作者Imad El Hitti