基础选型
回顾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/
使用体验
- (简便)用户登录后,会封装好Auth及相关参数到headers,这个步骤还没有重构的需求
- (简便)subscribe处理请求部分,写了通用的reject方式,例如Auth过期,自动调用登出事件
- (繁琐)当同一个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