如何在Angular项目中等待异步方法返回结果后再执行后续逻辑？

问题根因 #

• 方案1失效原因：Angular的http.get()返回的是RxJS的Observable对象，subscribe方法返回的是订阅实例而非Promise，await无法监听异步请求的完成状态，等待逻辑不生效。
• 方案2报错原因：直接将this.findSpecificUser作为回调传递时，方法的this指向丢失，执行时上下文不是组件实例，因此读取不到this.users属性。

解决方案 #

以下方案均为最小改动，不会破坏原有代码结构：

方案1：适配async/await写法 #

仅需将Observable转为Promise，同时给上层方法加async/await即可：

users;
async makeApiCallToGetAllUsers() {
  // Angular 12以下用toPromise()，12及以上可以用firstValueFrom
  const data = await this.http.get('https://jsonplaceholder.typicode.com/users').toPromise();
  console.log('data', data);
  this.users = data;
}

async predifinedFilter() {
  await this.makeApiCallToGetAllUsers();
}

async clickHandler() {
  await this.predifinedFilter();
  this.findSpecificUser();
}

findSpecificUser() {
  console.log('users', this.users);
}

如果使用Angular 12+版本，toPromise()已废弃，可替换为await firstValueFrom(this.http.get('请求地址'))，需提前从rxjs包导入firstValueFrom。

方案2：修复回调的this指向 #

仅需修改回调传递的写法即可：

users;
makeApiCallToGetAllUsers(cb) {
  this.http.get('https://jsonplaceholder.typicode.com/users').subscribe(data => {
    console.log('data', data);
    this.users = data;
    cb();
  })
}

predifinedFilter(cb) {
  this.makeApiCallToGetAllUsers(cb);
}

clickHandler() {
  // 用bind绑定this，或者用箭头函数包裹：() => this.findSpecificUser()
  this.predifinedFilter(this.findSpecificUser.bind(this));
}

findSpecificUser() {
  console.log('users', this.users);
}

方案3：保留RxJS原生写法 #

不需要引入async/await，仅需让方法返回Observable即可：

users;
makeApiCallToGetAllUsers() {
  return this.http.get('https://jsonplaceholder.typicode.com/users');
}

predifinedFilter() {
  return this.makeApiCallToGetAllUsers().pipe(
    tap(data => {
      console.log('data', data);
      this.users = data;
    })
  );
}

clickHandler() {
  this.predifinedFilter().subscribe(() => {
    this.findSpecificUser();
  })
}

findSpecificUser() {
  console.log('users', this.users);
}

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