版本：4.0.0+2
随着英雄指南应用的进化，你将会添加更多的需要访问英雄数据的组件。
你将创建一个单独的可复用的数据服务，并把它注入到需要它的组件中，而不是反复地复制和粘贴相同的代码。使用一个单独的服务，让组件保持精简，专注于为视图提供支持，并且使用模拟服务使其易于编写单元测试组件。
因为数据服务总是异步的，你将会使用一个基于 Future 版本的数据服务来完成本章。
当你按照本章完成之后，应用看起来应该是这样的——在线示例 (查看源码)。
我们离开的地方
在继续英雄指南之前，验证你是否有如下结构。如果没有，回去查看前一章。
如果应用不运行了，启动应用。当你做出修改时，通过刷新浏览器保持继续运行。
创建英雄服务
客户想要在不同的页面上以不同的方式显示英雄。现在用户已经可以从列表中选择一个英雄了。很快，你将添加一个仪表盘来显示表现最好的英雄，并创建一个独立视图来编辑英雄的详情。这三个视图都需要英雄数据。
目前，AppComponent显示的是模拟数据。然而，定义英雄的数据不该是组件的任务，并且你不能很容易地在其它组件和视图中共享这个英雄列表。在本章，你将移动获取英雄数据的业务到一个单独的服务中，它将提供数据，并在所有需要这个数据的组件之间共享此服务。
创建一个可注入的 HeroService
在lib/src目录下创建一个名为hero_service.dart的文件。
服务文件的命名约定是——小写的服务名后紧跟着
_service。对于多个单词的服务名，使用小写蛇形。例如，SpecialSuperHeroService服务的文件名应该是special_super_hero_service.dart。
把这个类命名为HeroService。
// lib/src/hero_service.dart (empty class)
import 'package:angular/angular.dart';
@Injectable()
class HeroService {
}
可注入的服务
注意你使用的 @Injectable() 注解。这告诉 Angular 编译器HeroService将会是一个注入的候补（更多信息很快就来）。
获取英雄数据
HeroService可以从任何地方获取英雄数据：Web 服务、本地存储（LocalStorage）或一个模拟的数据源。目前，导入Hero和mockHeroes，并且在一个getHeroes()方法中返回模拟的英雄：
// lib/src/hero_service.dart
import 'package:angular/angular.dart';
import 'hero.dart';
import 'mock_heroes.dart';
@Injectable()
class HeroService {
List<Hero> getHeroes() => mockHeroes;
}
使用英雄服务
你已经准备好在其它组件中使用HeroService了，先从AppComponent开始吧。
导入HeroService以便你可以在代码中引用它。
// lib/app_component.dart (hero service import)
import 'src/hero_service.dart';
不要对 HeroService 使用 new
AppComponent应该如何获取HeroService的实例呢？
你可以像这样使用new来创建一个新的HeroService实例：
// lib/app_component.dart (excerpt)
HeroService heroService = new HeroService(); // 不要这样做
然而，这并不是一个好的选择，原因如下：
- 组件必须知道如何创建一个
HeroService实例。如果你修改了HeroService的构造函数，你就必须找到并更新创建过此服务的每一处地方。在多处地方修补代码容易引起错误并增加测试的负担。 - 每使用一次
new你就创建一个服务。假如服务缓存英雄并和其它的服务或组件共享这个缓存呢？你做不到那样。 -
AppComponent受限于一个特定的HeroService实现，难以针对不同的情景选择不同的实现，例如，离线操作或为测试使用不同的模拟版本。
注入 HeroService
添加如下所述的行，而不是使用new表达式：
- 添加一个私有的
HeroService属性。 - 添加一个构造函数初始化这个私有属性。
- 添加
HeroService到组件的providers元数据。
下面就是属性和构造函数：
// lib/app_component.dart (constructor)
final HeroService _heroService;
AppComponent(this._heroService);
构造函数除了设置_heroService属性什么也没做。_heroService的类型HeroService标志着构造函数的参数为HeroService的注入点。
现在，当创建一个新的AppComponent组件时，Angular 知道提供一个HeroService的实例。
更多关于依赖注入的内容，请看依赖注入章节。
注入器（injector）还不知道怎样创建HeroService。如果你现在运行代码，Angular会失败，并报错：
EXCEPTION: No provider for HeroService! (AppComponent -> HeroService)
添加如下的providers列表作为@Component注解最后的参数，来告诉注入器如何制造HeroService实例。
// lib/app_component.dart (providers)
providers: const [HeroService],
providers参数告诉 Angular，当它创建一个AppComponent组件时，创建一个新鲜的HeroService的实例。AppComponent及其子组件可以使用这个服务来获取英雄数据。
AppComponent.getHeroes() 方法
添加一个getHeroes()方法到 app component，并且移除heroes初始化程序：
// lib/app_component.dart (heroes and getHeroes)
List<Hero> heroes;
void getHeroes() {
heroes = _heroService.getHeroes();
}
ngOnInit 生命周期钩子
AppComponent应该毫无问题地获取和显示英雄。
你可能忍不住在构造函数中调用getHeroes()方法，但构造函数不应该包含复杂的逻辑，尤其是一个呼叫服务器的构造函数，比如一个数据存取方法。构造函数应该单纯用来初始化，比如把构造函数的参数赋值给属性。
你可以实现 Angular 的 ngOnInit 生命周期钩子，来使 Angular 调用getHeroes()方法。Angular 为组件生命周期的几个关键时刻提供了接口：创建时、每次变化后，以及最终被销毁时。
每个接口有一个单独的方法。当组件实现了那个方法，Angular 就会在适当的时机调用它。
更多关于生命周期钩子的内容请看生命周期钩子章节。
添加 OnInit 到AppComponent实现的接口列表，并编写一个内部带有初始化逻辑的ngOnInit方法。Angular 会在适当的时候调用它。在这个例子中，通过调用getHeroes()初始化。
class AppComponent implements OnInit {
void ngOnInit() => getHeroes();
}
刷新浏览器。应用应该显示一列英雄，并且当用户点击英雄名时，显示英雄详情视图。
异步的英雄服务
HeroService立刻返回了一个模拟英雄的列表；它的getHeroes()签名是同步的：
// lib/src/hero_service.dart (getHeroes)
List<Hero> getHeroes() => mockHeroes;
最终，英雄数据会来自于一个远程服务器。当使用一个远程服务器时，用户不得不等待服务器响应；此外，在等待时你也不能够阻塞 UI。
要协调视图和响应，可以使用 Futures，这是一种改变getHeroes()方法签名的异步技术。
英雄服务返回一个 Future
一个 Future 表示一个未来的计算或值。使用一个Future，你可以注册回调函数，它将会在计算完成（结果准备好）或计算出错需要报告时被调用。
这里只是简单的说明。更多关于 Futures 的信息请看 Dart 语言教程的 异步编程: Futures。
添加一个 dart:async 的导入，因为它定义了Future，并且更新 HeroService，使用Future作为 getHeroes()方法的返回值类型：
// lib/src/hero_service.dart (excerpt)
Future<List<Hero>> getHeroes() async => mockHeroes;
你仍然在使用模拟数据。通过返回一个模拟英雄立即可用的Future，模拟了一个超快、零延迟的服务器行为。
设置返回值类型为
Future，使一个方法自动变成了异步方法。关于异步函数的更多信息，请看 Dart 语言教程的声明异步函数。
处理 Future
由于HeroService改变的结果，app 组件的heroes属性现在是一个Future而不是一个英雄的列表。你必须改变这种实现，在它完成时处理Future结果。当Future成功完成，你就会有英雄来显示了。
这里是目前的实现：
// lib/app_component.dart (synchronous getHeroes)
void getHeroes() {
heroes = _heroService.getHeroes();
}
传递一个回调函数作为Future.then()方法的参数：
// lib/app_component.dart (asynchronous getHeroes)
void getHeroes() {
_heroService.getHeroes().then((heroes) => this.heroes = heroes);
}
这个回调函数设置组件的heroes属性到通过服务返回的英雄列表。
刷新浏览器。应用仍然运行，显示一列英雄，并使用一个详情视图响应名称的选择。
使用 async/await
一个异步方法包含一个或多个Future.then()方法难以阅读和理解。谢天谢地，Dart 的async/await语言特性让你写异步代码就像写同步代码一样。重写getHeroes()：
// lib/app_component.dart (revised async/await getHeroes)
Future<Null> getHeroes() async {
heroes = await _heroService.getHeroes();
}
Future<Null>返回值类型等价于异步的void。
更多关于使用async/await异步变成的知识，请看 Dart 语言教程异步编程: Futures的 Async and await部分。
在本章的结尾，附录：慢一点 描述了连接不良的应用可能是什么样的。
回顾应用结构
确认经过所有重构之后，应该有如下文件结构：
我们已经走过的路
以下就是你在本章的收获：
- 创建了一个能被多个组件共享的服务类。
- 使用
ngOnInit生命周期钩子，在AppComponent激活时获取英雄数据。 - 定义
HeroService作为AppComponent的一个提供器。 - 把服务设计为返回一个 Future，并且组件从 Future 中获取数据。
附录：慢一点
要模拟一个缓慢的连接，添加如下的getHeroesSlowly()方法到HeroService。
// lib/src/hero_service.dart (getHeroesSlowly)
Future<List<Hero>> getHeroesSlowly() {
return new Future.delayed(const Duration(seconds: 2), getHeroes);
}
像 getHeroes 一样，它也返回一个Future，但这个 Future 会在完成之前等待两秒钟。
回到 AppComponent ，用 getHeroesSlowly() 替换掉 getHeroes() ，并观察本应用是如何表现的。
下一步
网友评论