ionic2与ng2基于RESTful的HTTP数据处理技术选型

基础选型

回顾AngularJS 1

结论:ng1采用较为成熟的RESTangular第三方组件。

Angularjs 1 中可选的数据处理方法有以下三种: - $http 框架自带,处理原始HTTP请求 - $resource 框架自带,对$http进行初步封装 - $restangular 第三方组件,对RESTful深度封装,同时提供自定义方法。

调研AngularJS 2

结论:ng2目前处于RC阶段,相关库不成熟,选择最可靠的angular2/http

  • angular/http

官方手册:https://angular.io/docs/js/latest/api/http/

使用参考:http://coenraets.org/blog/2016/02/angular2-ionic2-rest-services/

  import {Http} from 'angular2/http';
  • marmelab/restful.js 第三方组件,纯ES6

star 535 on https://github.com/marmelab/restful.js

基于ES6开发,Think Restangular without Angular.

  # 方式一:npm安装
  npm install restful.js
  # 方式二:webpack安装
  import restful from 'restful.js';
  • Paldom/angular2-rest

star 94 on https://github.com/Paldom/angular2-rest

  • darekf77/ng2-rest

star 2 on https://github.com/darekf77/ng2-rest

angular2/http开发详解

参考教程

最佳实践 https://github.com/driftyco/ionic-conference-app

官方手册

官方手册:https://angular.io/docs/js/latest/api/http/

使用体验

  1. (简便)用户登录后,会封装好Auth及相关参数到headers,这个步骤还没有重构的需求
  2. (简便)subscribe处理请求部分,写了通用的reject方式,例如Auth过期,自动调用登出事件
  3. (繁琐)当同一个Promise中需要访问多次不同url的get请求时,仅仅是url参数的变动,其他部分都需要复制,导致冗余

那么以上三种情景,第三种情景使用频率较高:由于后端不是规范的REST,同一个资源的不同细节,都需要分别发get获取,例如project资源的成员、目标、任务,需要分别从project/member,project/goal,project/task获取。

因此,也不能直接使用前文提到的第三方库restful.js来开发,所以需要自主对ng2的http模块进行封装。

微信扫一扫交流

作者:ryanemax
微信关注:ryanemax (刘雨飏)
本文出处:https://romantic-hoover-f991f1.netlify.com/cookbook/frontend/ng2-restful/
授权协议: CC BY-SA 4.0