Angular调用service报错：Promise<Observable<Object>>上不存在subscribe属性

你遇到的报错是因为混合使用了Angular原生的Observable异步体系和JS原生Promise体系，导致类型不匹配：

• Angular HttpClient的get方法原生返回Observable<Object>类型
• 你在service的getStats方法上添加了async关键字，相当于把本来的Observable又包装了一层Promise，最终返回类型变成Promise<Observable<Object>>，而Promise本身没有subscribe方法，因此触发类型报错。

方案1：采用Angular生态推荐的Observable写法（最优解） #

直接使用Observable不需要额外包装Promise，修改代码如下：

1. 调整service代码，移除async/await，直接返回Observable：

import { Observable } from 'rxjs';

// service修正后代码
getStats(): Observable<Object> {
  return this.http.get(`http://localhost:8888/fetchStats`)
}

2. 调整组件ngOnInit代码，移除async/await，直接订阅Observable：

// 组件ngOnInit修正后代码
ngOnInit(): void {
  this.specsService.getStats().subscribe((response) => {
    this.stats = response
  });
}

方案2：如果确实需要使用Promise体系实现 #

先把Observable转为Promise再用async/await接收，修改代码如下：

1. 调整service代码，将Observable转为Promise：

// Angular 11及更早版本写法
async getStats(): Promise<Object> {
  return await this.http.get(`http://localhost:8888/fetchStats`).toPromise()
}

// Angular 12+版本写法（toPromise已废弃，推荐用RxJS提供的转换方法）
import { firstValueFrom } from 'rxjs';
async getStats(): Promise<Object> {
  return await firstValueFrom(this.http.get(`http://localhost:8888/fetchStats`))
}

2. 调整组件ngOnInit代码，直接await Promise结果，不需要subscribe：

async ngOnInit(): Promise<void> {
  this.stats = await this.specsService.getStats()
}

• 如果采用Observable方案，建议在组件销毁时主动取消订阅，避免内存泄漏，可以配合takeUntil销毁通知实现
• 尽量不要在Angular项目中混合两种异步体系，统一使用Observable更适配框架生态，能方便使用RxJS的各类流式操作能力

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