Angular(10) - 使用异步方法获取数据 - 官方教程英雄指南之添加异步方法 （详细解说）

1 使用异步方法获取数据。

• HeroService.getHeroes() 的函数签名是同步的，它所隐含的假设是 HeroService 总是能同步获取英雄列表数据。 而 HeroesComponent 也同样假设能同步取到 getHeroes() 的结果。
• 这在真实的应用中几乎是不可能的,因为网络请求都是需要时间的，视乎网络情况和数据量大小
• HeroService 必须等服务器给出响应， 而 getHeroes() 不能立即返回英雄数据， 浏览器也不会在该服务等待期间停止响应。
• HeroService.getHeroes() 必须具有某种形式的异步函数签名
• 新的HeroService.getHeroes() 将会返回 Observable，部分原因在于它最终会使用 Angular 的 HttpClient.get 方法来获取英雄数据，而 HttpClient.get() 会返回 Observable。

2 导入 Observable, 可观察对象

src/app/hero.service.ts

import { Observable, of } from 'rxjs';

3 将原返回方法修改为异步方法，of(HEROES) 会返回一个 Observable<Hero[]>它会发出单个值，这个值就是这些模拟英雄的数组。

ObservableObservablegetHeroes(): Observable<Hero[]> {
  return of(HEROES);
}

4 订阅新的Hero数据, HeroService.getHeroes 方法之前返回一个 Hero[]， 现在它返回的是 Observable<Hero[]>。

heroes.component.ts

getHeroes(): void {
  this.heroService.getHeroes()
      .subscribe(heroes => this.heroes = heroes);
}

新的版本等待 Observable 发出这个英雄数组，这可能立即发生，也可能会在几分钟之后。 然后，subscribe() 方法把这个英雄数组传给这个回调函数，该函数把英雄数组赋值给组件的 heroes 属性。