在Angular里使用rxjs的异步API - Observable

简介: 在Angular里使用rxjs的异步API - Observable

Angular的service类里,导入Observable和of:image.png

of(HEROES) returns an Observable that emits a single value, the array of mock heroes.


下面是消费端如何调用这个返回Observable的TypeScript代码:

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

注意将其同之前的同步API相比较:image.png

The new version waits for the Observable to emit the array of heroes—which could happen now or several minutes from now. The subscribe() method passes the emitted array to the callback, which sets the component’s heroes property.


第32行,调用OBservable API的subscribe方法,方法接收一个回调函数,设置Component的heroes属性为Observable里包裹的数组。


在调试器里能观察到这个回调函数是如何被observable框架异步调用的:

image.png

相关文章
|
8月前
|
JavaScript Shell
使用 RxJs 实现一个支持 infinite scroll 的 Angular Component
使用 RxJs 实现一个支持 infinite scroll 的 Angular Component
31 0
|
4月前
|
Web App开发 前端开发 测试技术
【Web API系列】使用异步剪贴板API(async clipboard)的图像的编程复制和粘贴
【Web API系列】使用异步剪贴板API(async clipboard)的图像的编程复制和粘贴
82 1
|
4月前
|
消息中间件 Kafka API
Kafka - 异步/同步发送API
Kafka - 异步/同步发送API
48 0
|
7月前
|
UED
关于 Angular 应用里 Rxjs filter 操作符内的双重感叹号的用法
关于 Angular 应用里 Rxjs filter 操作符内的双重感叹号的用法
29 0
|
7月前
|
JavaScript API 开发者
什么是 Angular 的 API Extractor?
什么是 Angular 的 API Extractor?
43 0
|
7月前
|
前端开发 API
Angular HTTPClient API 在 SAP 电商云中的使用
Angular HTTPClient API 在 SAP 电商云中的使用
45 0
|
8月前
|
搜索推荐 API 网络架构
关于 Angular Universal 应用执行时需要 Browser API 的问题
关于 Angular Universal 应用执行时需要 Browser API 的问题
41 0
关于 Angular Universal 应用执行时需要 Browser API 的问题
|
8月前
|
前端开发 容器
使用 Rxjs 解决 Angular Component 之间的通信问题
使用 Rxjs 解决 Angular Component 之间的通信问题
36 0
|
8月前
|
前端开发 API
使用 RxJs Observable 来避免 Angular 应用中的 Promise 使用
使用 RxJs Observable 来避免 Angular 应用中的 Promise 使用
65 0
|
8月前
|
JavaScript
使用 RxJS timeout 操作符给 Angular SSR 服务器端渲染模式下的 HTTP 请求添加超时机制
使用 RxJS timeout 操作符给 Angular SSR 服务器端渲染模式下的 HTTP 请求添加超时机制
70 0