美文网首页我爱编程
英雄案例笔记--服务

英雄案例笔记--服务

作者: Monee121 | 来源:发表于2018-03-10 15:12 被阅读0次

服务:
可观察(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:

ObservableRxJS 库中的一个关键类。

稍后的 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<Hero[]> { /*用rxjs返回模拟的英雄列表*/
  return of(HEROES);
}
/* getHeroes(): Hero[] { /!*(同步返回模拟的英雄列表*!/
    return HEROES;
  }*/

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

在 HeroesComponent 中订阅

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

  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();
}

相关文章

  • 英雄案例笔记--服务

    服务:可观察(Observable)的数据: HeroService.getHeroes() 的函数签名是同步的,...

  • 英雄案例笔记--httpClient

    内存 Web API: 在英雄指南范例中创建一个类 src/app/in-memory-data.service....

  • 2020-11-10

    大型网站技术架构-核心原理与案例分析#读书笔记 大型网站架构优化 初始阶段warn-1.png 应用服务和数据服务...

  • 英雄案例

    【D2809殉职司机名叫杨勇,谁说站在光里的才是英雄】6月4日上午10时30分许,D2809次旅客列车行驶在贵广线...

  • 手撸golang GO与微服务 ChatServer之1

    缘起 最近阅读<> (刘金亮, 2021.1)本系列笔记拟采用golang练习之 案例需求(聊天...

  • 手撸golang GO与微服务 ChatServer之3 压测与

    缘起 最近阅读<> (刘金亮, 2021.1)本系列笔记拟采用golang练习之 案例需求(聊天...

  • 手撸golang GO与微服务 ChatServer之4 内存泄

    缘起 最近阅读<> (刘金亮, 2021.1)本系列笔记拟采用golang练习之 案例需求(聊天...

  • 手撸golang GO与微服务 ChatServer之2

    缘起 最近阅读<> (刘金亮, 2021.1)本系列笔记拟采用golang练习之 案例需求(聊天...

  • 5.服务

    一. 创建英雄服务: 把获取英雄数据的任务重构为一个单独的服务,它将提供英雄数据,并把服务在所有需要英雄数据的组件...

  • 服务案例

    上门测量-设计-安装-一对一售后服务 客户先是从网上了解到皇球货架,后经过我们上海体验店考察,顾客很认可我们的产品...

网友评论

    本文标题:英雄案例笔记--服务

    本文链接:https://www.haomeiwen.com/subject/ejnmfftx.html