英雄案例笔记--服务

服务：
可观察（Observable）的数据：

HeroService.getHeroes() 的函数签名是同步的，它所隐含的假设是 HeroService 总是能同步获取英雄列表数据。 而 HeroesComponent 也同样假设能同步取到 getHeroes() 的结果。

this.heroes = this.heroService.getHeroes();

HeroService.getHeroes() 必须具有某种形式的异步函数签名。

它可以使用回调函数，可以返回 Promise（承诺），也可以返回 Observable（可观察对象）。
这节课，HeroService.getHeroes() 将会返回 Observable，因为它最终会使用 Angular 的 [HttpClient](https://angular.cn/api/common/http/HttpClient).get 方法来获取英雄数据，而 HttpClient.get() 会返回 Observable。

可观察对象版本的 HeroService:

Observable 是 RxJS 库中的一个关键类。

在稍后的 HTTP 教程中，你就会知道 Angular [HttpClient](https://angular.cn/api/common/http/HttpClient) 的方法会返回 RxJS 的 Observable。 这节课，你将使用 RxJS 的of() 函数来模拟从服务器返回数据。

打开 HeroService 文件，并从 RxJS 中导入 Observable 和 of 符号。

import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';

getHeroes(): Observable { /*用rxjs返回模拟的英雄列表*/
  return of(HEROES);
}
/* getHeroes(): Hero[] { /!*（同步返回模拟的英雄列表*!/
    return HEROES;
  }*/

of(HEROES) 会返回一个 Observable，它会发出单个值，这个值就是这些模拟英雄的数组。
在 HTTP 教程中，你将会调用 [HttpClient](https://angular.cn/api/common/http/HttpClient).get() 它也同样返回一个 Observable，它也会发出单个值，这个值就是来自 HTTP 响应体中的英雄数组。

在 HeroesComponent 中订阅

你必须在 HeroesComponent 中也向本服务中的这种形式看齐
HeroService.getHeroes 方法用于返回一个 Hero[]， 目前它返回的是 Observable。

  getHeroes(): void {   // 服务是用rxjs的of,组件与服务一致，所以
    this.heroService.getHeroes()
      .subscribe(heroes => this.heroes = heroes);
  }
/* getHeroes(): void {   // 同步获取服务里的方法
    this.heroes = this.heroService.getHeroes();
  }*/

Observable.subscribe() 是关键的差异点。

上一个版本把英雄的数组赋值给了该组件的 heroes 属性。 这种赋值是同步的，这里包含的假设是服务器能立即返回英雄数组或者浏览器能在等待服务器响应时冻结界面。

当 HeroService 真的向远端服务器发起请求时，这种方式就行不通了。

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

使用这种异步方式，当 HeroService 从远端服务器获取英雄数据时，就可以工作了。

ngOnInit() {
  this.getHeroes();
}