Angular2中的Observable与Ionic2中的Provider、Promise

随着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是navigationcomponentin the context of navigation)中的decorators

3. ReactiveX库中的Observable

一个Observer向一个Observable来subscribe。Observable会通过调用observers的方法,向observersemits 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

Create,DeferEmpty/NeverThrowFromIntervalJustRangeRepeatStartTimer

Transforming Observable Items

BufferFlatMapGroupByMapScanWindow

Filtering Observables

DebouncedistinctElementAtFilterFirstIgnoreElementsLastSampleSkipSkipLastTakeTakeLast

Combining Observables

AndThenWhenCombineLatestJoinMergeStartWithSwitchZip

Error Handling Operators

CatchandRetry

Utility Operators

DelayDoMaterializeDematerializeObserveOnSerializeSubscribeSubscribeOnTimeIntervalTimeoutTimestampUsing

Conditional and Boolean Operators

AllAmbContainsDefaultIfEmptySequenceEqualSkipUntilSkipwhiletakeuntilTakeWhile

Mathematical and Aggregate Operators

AverageConcatCountMaxMinReduceSum

Converting Observables

To

Connectable Observable Operators

ConnectPublishRefCountReplay

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

相关文章

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,...
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...