Angular中如何在ngOnInit中按序调用两个依赖方法并支持then链式调用

要实现then链式调用，你需要把调用REST服务返回的Observable转换为Promise，并让one()和two()方法返回这个Promise对象。以下是两种可行的实现方式：

方式1：使用RxJS的firstValueFrom（推荐，替代已废弃的toPromise） #

首先导入firstValueFrom：

import { firstValueFrom } from 'rxjs';

修改one()和two()方法：

// 方法one：返回包含userId的Promise
one(): Promise<number> {
  return firstValueFrom(this.restService.getUserId()).then(resp => {
    return resp.result;
  });
}

// 方法two：接收userId，返回包含address的Promise
two(userId: number): Promise<string> {
  return firstValueFrom(this.restService.getData(userId)).then(resp => {
    return resp.result;
  });
}

也可以用async/await简化写法，可读性更强：

async one(): Promise<number> {
  const resp = await firstValueFrom(this.restService.getUserId());
  return resp.result;
}

async two(userId: number): Promise<string> {
  const resp = await firstValueFrom(this.restService.getData(userId));
  return resp.result;
}

方式2：手动封装Promise #

如果不想使用RxJS的工具函数，也可以手动把Observable包装成Promise：

one(): Promise<number> {
  return new Promise((resolve) => {
    this.restService.getUserId().subscribe(resp => {
      const userId = resp.result;
      resolve(userId);
    });
  });
}

two(userId: number): Promise<string> {
  return new Promise((resolve) => {
    this.restService.getData(userId).subscribe(resp => {
      const address = resp.result;
      resolve(address);
    });
  });
}

调用方式 #

你的ngOnInit代码可以保持不变，或者用async/await优化：

ngOnInit() {
  // 原then链式调用写法
  this.one().then(userId => {
    this.two(userId).then(address => {
      // 在这里处理最终拿到的address数据
      console.log(address);
    });
  });

  // 或者更简洁的async/await写法
  // (async () => {
  //   const userId = await this.one();
  //   const address = await this.two(userId);
  //   console.log(address);
  // })();
}

关键说明 #

• 原方法没有返回值，且subscribe只是订阅Observable的数据流，不会生成Promise，因此无法使用then链式调用。
• HTTP请求返回的Observable是单次数据流（请求完成后自动结束），所以用firstValueFrom可以安全地获取结果并转换为Promise。

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