文档章节

Angular2中的Observable与Ionic2中的Provider、Promise

一配
 一配
发布于 2016/04/26 10:29
字数 1194
阅读 1800
收藏 2

    随着Inoic Beta6的发布[1],对其中的一些技术细节, 重点是ReactiveX库, Angular2中的Observable, Ionic2中的Provider(或Service)、Promise做了初步的分析。 

1. 如何查看app使用的是哪一个Ionic版本[1]

   方法1: 查看app使用的ionic库版本:npm view ionic-angular version

   方法2: 查看app根目录下的package.json文件,可以看到版本依赖关系,例如:

    "ionic-angular": "2.0.0-beta.6"

2. Components 与 Pages有哪些差异

     参照[2,3], pages是navigation componentin the context of navigation)中的 decorators 。 

3. ReactiveX库中的Observable

    一个Observer向一个Observable来subscribe。Observable会通过调用observers的方法,向observers emits items或发送通知,“observer”也被称为“subscriber,” “watcher,” 或“reactor.”,通常被称为观察者模式、reactor模式等 [6]。

    Observables 和Observers仅仅是ReactiveX库的起点,它不仅仅只是对标准的观察者模式的一个小小的扩展,它更适于处理一系列事件而不只是一次回调函数的调用。

   真正强大之处在于“reactive extensions” (因此这个库被命名为“ReactiveX”) — 可以对Observable发布的一系列items来做大量操作:transform, combine, manipulate等等。

   这些Rx operators就可以用declarative方式将异步序列组合起来,这样既有回调函数的高效率,又避免了嵌套回调handlers在异步处理中典型的缺陷。这些operators包括:

    Creating Observables

    CreateDeferEmpty/Never/ThrowFromIntervalJustRangeRepeatStart, and Timer

    Transforming Observable Items

    BufferFlatMapGroupByMapScan, and Window

    Filtering Observables

    DebounceDistinctElementAtFilterFirstIgnoreElementsLastSampleSkipSkipLast,Take, and TakeLast

    Combining Observables

    And/Then/WhenCombineLatestJoinMergeStartWithSwitch, and Zip

    Error Handling Operators

         Catch and Retry

    Utility Operators

       DelayDoMaterialize/DematerializeObserveOnSerializeSubscribeSubscribeOn,TimeIntervalTimeoutTimestamp, and Using

    Conditional and Boolean Operators

    AllAmbContainsDefaultIfEmptySequenceEqualSkipUntilSkipWhileTakeUntil, andTakeWhile

    Mathematical and Aggregate Operators

    AverageConcatCountMaxMinReduce, and Sum

    Converting Observables

    To

    Connectable Observable Operators

    ConnectPublishRefCount, and Replay

    Backpressure Operators

        a variety of operators that enforce particular flow-control policies

许多operators处理Observable并返回Observable,这样这些operators就可以链式一个接一个调用。在链中的每个operator 处理的不是初始的Observable, 而是在修改Observable后,将修改后的Observable依次传给下一个operator.

    Builder模式也是类似地链式调用,但Builder模式中链中方法顺序是无关的,而Observable operators顺序是相关的。

    ReactiveX库有Java实现RxJava,有JavaScript实现RxJS。

4. Angular2中的Http Service与Observable

    Angular 1中使用Promise异步加载数据,但在Angular 2中使用Observable来处理异步请求 ,Observable类由ReactiveX库提供。 Angular 2中的Http service是Angular 1中$http的继承者, http.get( )方法不再返回一个Promise, 而是返回一个Observable对象。

ngOnInit() {
    this.getFoods();
  } 
  getFoods() {
    this.http.get('/app/food.json')
      .map((res:Response) => res.json())
      .subscribe(
        data => { this.foods = data},
        err => console.error(err),
        () => console.log('done')
      );
  }

    调用http.get( )来执行HTTP请求,返回一个Observable对象,这样就可以使用map( )方法来配置待处理的数据, 使用subscribe( )方法来观察处理结果。

    由于Angular不知道需要将response解析为JSON,需要使用 .map((res:Response) => res.json()) 调用来让Angular知道. 这个map( )方法也返回一个Observable, 这样就可以使用method chaining.

    调用subscribe( ) 方法来接收output,其中的三个参数都是event handler. 分别是onNext, onError, 和onCompleted. 

  • onNext方法接收HTTP响应数据. Observables支持数据流,可以多次调用这个event handler。但对于HTTP请求数据,Observable通常是在一个调用中就返回所有数据。

  • 如果HTTP请求返回一个诸如404的错误码,则onError event handler被调用。

  • Observable将所有的数据都返回完成后,执行onCompleted event handler。这在Http.get() 调用中很少使用,因为需要的所有数据都传入到onNext handler。

    这三个参数中,onError 和onCompleted是可选参数,但通常onError不能省略,否则一个未捕获的Error会导致应用停止执行。

5. Ionic2中的Provider、Service、Observable与Promise

    Ionic2中Provider也就是一个Service, 可以用ionic g provider PeopleService命令来生成一个名称为PeopleService的provider 。

    Observable相对Promise有许多优势,因此Angular2中使用了RxJS。而当前Ionic中生成provider代码时使用的是ng2中的http模块,它是个observable, 但then( )返回将它转为一个promise返回, ionic团队正在计划修改。

6.  ionic-native与ngCordoava

    Ionic 2中ionic-native替换了ngCordoava。


参考资料:

[1] Announcing the Release of Ionic 2 Beta 6!, http://blog.ionic.io/announcing-the-release-of-ionic-2-beta-6/

[2] 10 Minutes with Ionic 2: Calling an API, http://blog.ionic.io/10-minutes-with-ionic-2-calling-an-api/

[3] Ionic Docs Nav, http://ionicframework.com/docs/v2/api/components/nav/Nav/

[4] Refactor provider generator to use observables properly #5532, https://github.com/driftyco/ionic/issues/5532/

[5] Angular 2: HTTP, Observables, and concurrent data loading, http://www.metaltoad.com/blog/angular-2-http-observables

[6] Observable, http://reactivex.io/documentation/observable.html

[7] Reactor Guide 中文翻译, http://reactor.jervyshi.me/index.html

© 著作权归作者所有

一配
粉丝 34
博文 144
码字总数 112398
作品 0
西城
私信 提问
Angular 2.4.6 和 4.0.0 beta6 发布, Web 前端框架

Angular 2.4.6 和 4.0.0 beta6 发布了,Angular 是一款十分流行且好用的 Web 前端框架,目前由 Google 维护。 Angular 2.4.6 更新内容: Bug 修复 common: add PopStateEvent interface comm...

王练
2017/02/04
2.1K
2
Angular.js 相关记录

AngularJS作用域文档:http://docs.angularjs.org/api/ng.$rootScope.Scope ng-view 指令的角色是为当前路由把对应的视图模板载入到布局模板中。 AngularJS内置过滤器:http://code.angular...

彭博
2014/04/25
304
2
angular--Observable总结

Observable的通俗理解 ---Observable在消息发布者和观察者Observer之间起到一个媒体中介的作用,Observer是真正需要接受信息的人。Observable的实例提供了一个订阅函数,subscribe()。当Obs...

IrisHuang
2018/07/07
58
1
开源中国的 AngularJS 优秀文章汇总

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

oschina
2014/08/24
5.8K
13
登录失败,始终提示公司名称不存在

根据前端的输出错误应该是后端的服务接口没有启动,可是不知道怎么解决! 前端控制器输出错误如下: Load defined data api failed: Account.LoginAPI Error: [$injector:unpr] Unknown pro...

gread_369
2016/08/24
323
1

没有更多内容

加载失败,请刷新页面

加载更多

《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
今天
4
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
今天
6
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
今天
4
0
OSChina 周日乱弹 —— 我,小小编辑,食人族酋长

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @宇辰OSC :分享娃娃的单曲《飘洋过海来看你》: #今日歌曲推荐# 《飘洋过海来看你》- 娃娃 手机党少年们想听歌,请使劲儿戳(这里) @宇辰OSC...

小小编辑
今天
992
11
MongoDB系列-- SpringBoot 中对 MongoDB 的 基本操作

SpringBoot 中对 MongoDB 的 基本操作 Database 库的创建 首先 在MongoDB 操作客户端 Robo 3T 中 创建数据库: 增加用户User: 创建 Collections 集合(类似mysql 中的 表): 后面我们大部分都...

TcWong
今天
40
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部