Angular JS中 Promise用法
一、Promise形象讲解A
promise不是angular首创的,作为一种编程模式,它出现在1976年,比js还要古老得多。promise全称是 Futures and promises。
而在javascript世界中,一个广泛流行的库叫做Q 地址是https://github.com/kriskowal/q 而angular中的$q就是从它引入的。promise解决的是异步编程的问题,对于生活在同步编程世界中的程序员来说,它可能比较难于理解,这也构成了angular入门门槛之一,以下将用生活中的一个例子对此做一个形象的讲解。
假设有一个家具厂,而它有一个VIP客户张先生。
有一天张先生需要一个豪华衣柜,于是,他打电话给家具厂说我需要一个衣柜,回头做好了给我送来,这个操作就叫$q.defer,也就是延期,因为这个衣柜不是现在要的,所以张先生这是在发起一个可延期的请求。
同时,家具厂给他留下了一个回执号,并对他说:我们做好了会给您送过去,放心吧。这叫做promise,也就是承诺。
这样,这个defer算是正式创建了,于是他把这件事记录在自己的日记上,并且同时记录了回执号,这叫做deferred,也就是已延期事件。
现在,张先生就不用再去想着这件事了,该做什么做什么,这就是“异步”的含义。
假设家具厂在一周后做完了这个衣柜,并如约送到了张先生家(包邮哦,亲),这就叫做deferred.resolve(衣柜),也就是“已解决”。而这时候张先生只要签收一下这个(衣柜)参数就行了,当然,这个“邮包”中也不一定只有衣柜,还可以包含别的东西,比如厂家宣传资料、产品名录等。整个过程中轻松愉快,谁也没等谁,没有浪费任何时间。
假设家具厂在评估后发现这个规格的衣柜我们做不了,那么它就需要deferred.reject(理由),也就是“拒绝”。拒绝没有时间限制,可以发生在给出承诺之后的任何时候,甚至可能发生在快做完的时候。而且拒绝时候的参数也不仅仅限于理由,还可以包含一个道歉信,违约金之类的,总之,你想给他什么就给他什么,如果你觉得不会惹恼客户,那么不给也没关系。
假设家具厂发现,自己正好有一个符合张先生要求的存货,它就可以用$q.when(现有衣柜)来把这个承诺给张先生,这件事就立即被解决了,皆大欢喜,张先生可不在乎你是从头做的还是现有的成品,只会惊叹于你们的效率之高。
假设这个家具厂对客户格外的细心,它还可能通过deferred.notify(进展情况)给张先生发送进展情况的“通知”。
这样,整个异步流程就圆满完成,无论成功或者失败,张先生都没有往里面投入任何额外的时间成本。
好,我们再扩展一下这个故事:
张先生这次需要做一个桌子,三把椅子,一张席梦思,但是他不希望今天收到个桌子,明天收到个椅子,后天又得签收一次席梦思,而是希望家具厂做好了之后一次性送过来,但是他下单的时候又是分别下单的,那么他就可以重新跟家具厂要一个包含上述三个承诺的新承诺,这就是$q.all(桌子承诺,椅子承诺,席梦思承诺),这样,他就不用再关注以前的三个承诺了,直接等待这个新的承诺完成,到时候只要一次性签收了前面的这些承诺就行了。
二、Promise形象讲解B
一天早晨,爹对儿子说:“宝儿,出去看看天气如何!”
每个星期天的早晨,爹都叫小宝拿着超级望远镜去家附近最高的山头上看看天气走势如何,小宝说没问题,我们可以认为小宝在离开家的时候给了他爹一个promise。
这时候,他爹就想了,如果明天艳阳高照,他就准备去钓鱼,如果天实在不行,就作罢,如果小宝对预报明天的天气也没底,他就在家宅一天哪也不去。
大概过了半小时,小宝回来了。每周的结果不尽相同:
A计划 :天气晴朗
小宝不辱使命,说外面阳光明媚,万里无云,这个promise was resolved(小宝信守承诺),爹就可以收拾行装,钓鱼去鸟。
B计划: 小宝日观天象,阴转小雨的节奏
小宝依然不辱使命,但是天公不作美,promise was resolved,但是孩儿他爹觉得还是搁家呆着吧。
C计划:天象诡谲,小宝无法做出天气走势判断
小宝败兴而归,云雾重重,遮蔽了视线,不敢妄言天气走势,小宝走的时候立下承诺说要给他爹预报天气,但是没有成功,我们说promise was rejected!孩儿他爹决定小心驶得万年船,还是在家吧。
上述种种,用代码写出来是什么样子呢?
我们可以把孩儿他爹看成controller,小宝就是service。
整理逻辑:孩儿他爹让小宝去看天气,小宝不能立刻告诉他,但是孩儿他爹在等待结果的这段时间里可以抽抽烟,喝喝茶啥的,因为小宝承诺会把天气情况搞清楚。等小宝把天气预报带回来,他就可以决定下一步干啥。各位看官注意了:小宝登高望远看天气的时候并没有影响他爹干别的事情,这就是promise的妙处所在。
Angular里有个then()函数,我们可以决定孩儿他爹到底是用哪个计划(A,B,C),then()接收两个functions作为参数,第一个在promise is resolved的时候执行,另一个在promise is rejected的时候执行
Controller: FatherCtrl
孩儿他爹掌控局面的代码如下:
// function somewhere in father-controller.js var makePromiseWithSon = function() { // This service's function returns a promise, but we'll deal with that shortly SonService.getWeather() // then() called when son gets back .then(function(data) { // promise fulfilled if (data.forecast==='good') { prepareFishingTrip(); } else { prepareSundayRoastDinner(); } }, function(error) { // promise rejected, could log the error with: console.log('error', error); prepareSundayRoastDinner(); }); };
Service: SonService
小宝的作用就是充当了一个service,他爬上山头看天象,有点类似调用weather API,而且还是异步调用,他得到的结果可能是个变量,也有可能出现异常情况(比如,返回500—>大雾弥漫)。
从”Fishing Weather API”返回一个promise,如果it was resolved,就格式化成{“forecase”:”good”}。
// function somewhere in father-controller.js var makePromiseWithSon = function() { // This service's function returns a promise, but we'll deal with that shortly SonService.getWeather() // then() called when son gets back .then(function(data) { // promise fulfilled if (data.forecast==='good') { prepareFishingTrip(); } else { prepareSundayRoastDinner(); } }, function(error) { // promise rejected, could log the error with: console.log('error', error); prepareSundayRoastDinner(); }); };
总结
这个比喻向我们展示了异步的实质,孩儿他爹不会倚门等待儿子的归来,这段时间他完全可以自由活动。 孩儿他爹到底用哪个计划取决于(天气好/坏,没有成功预报),小宝在临走的时候给他爹一个promise,就等他回来的时候决定是resolve还是reject。
小宝其实是在使用异步服务(观天象—调用weather API)来获取天气信息,孩儿他爹根本就不懂技术,坐等结果即可!
三、代码解析Promise
1、先来看一段Demo,看完这个demo你可以思考下如果使用$.ajax如何处理同样的逻辑,使用ng的promise有何优势?
var ngApp=angular.module('ngApp',[]); /******************************************************************* * $q为内置服务 ****************************************************************/ ngApp.factory('UserInfoService',['$http','$q',function($http,$q){ return{ query:function(){ var defer=$q.defer(); //声明延后执行 $http({method:'GET',url:'data/students.json'}). success(function(data,status,headers,config){ defer.resolve(data); //声明执行成功 console.log('UserInfoService success'); }). error(function(data,status,headers,config){ defer.reject(); //声明执行失败 }); return defer.promise; //返回承诺,返回获取数据的API } } }]); ngApp.controller('MainCtrl',['$scope','UserInfoService',function($scope,UserInfoService){ var promise = UserInfoService.query(); //同步调用,获取承诺接口 promise.then(function(data){ $scope.user=data; //调用承诺接口resolove() console.log('MainCtrl ...'); },function(data){ $scope.user={error:'数据不存在。。。'}; //调用承诺接口reject(); }); }]);
2、什么是promise?
promise是一种用异步的方式处理值的方法,promise是对象,代表了一个函数最终可能的返回值或者抛出的异常,在与远程对象打交道时我们可以把他看作是远程对象的一个代理。 如果说是promise也是异步处理方式的一种,那么我们会想起它和XHR和$.ajax有啥区别呢?
习惯上js使用闭包或者回调来相应非同步返回的数据,比如页面加载之后的XHR请求。我们可以跟数据进行正常交互,就好像它已经返回了一样,而不需要依赖回调函数的触发。
那么ng提出的promise是为了解决什么问题呢? 回调已经被使用了很长时间,通常如果有回调依赖其他还回调时将会时调试变得非常艰难,每一步调用之后都需要显示处理错误。与之不同的是promise提供了另外一个抽象:这些函数返回promise对象。
从一定层面上看ng改变的不是简单的改变代码风格,而是让我对一些思维习惯发起了反思和改善。
回调示例
User.get(fromId,{ success:function(){
user.friends.find(toId,function(){})
},
failure:function(){}
})
ng promise示例
User.get(fromId).
then(function(user){
},function(err){
}).
then(function(){},function(){});
3、为什么使用promise
使用了promise的收获之一是逃脱了回调的固定思维逻辑。promise让异步处理的机制看上去更像是同步,基于同步函数我们可以按照预期来捕获返回值和异常值。可以在程序中的任何时刻捕捉错误,并且绕过依赖于程序异常的后续代码,我们不需要思考这个同步带来的好处。因此使用promise的目的是:获取功能组合和错误冒泡能力的同时,保持代码异步运行的能力。
promise是头等对象,自带了一些约定。
只有一个resolve或者reject会被调用到。
如果promise被执行或者被拒绝了,依赖于他们的处理程序仍然会被调用。
处理程序总是会被异步调用。
4、如何创建promise
想要在angularjs中创建promise,可以使用内置的$q服务,$q服务在它的deferred API中提供了一些方法。
首先把它注入到你想使用它的对象中
angular.module('ngApp',[]). factory('UserInfoService',['$q',function($q){ //code here }])
要创建一个deferred对象,可以调用defer()方法; var deferred= $q.defer();
deferred对象暴露了三个方法,以及一个可以用于处理promise的promise属性。
resolve(value)。 deferred.resolve({name:"Kobe",Age:36});
reject(reason)。 deferred.reject("Can't update user");
notify(value)。这个方法用promise的执行状态进行响应。
then(successFn,errFn,notifyFn)。
catch(errFn)。
finally(callback)。finally允许我们观察promise的执行或者拒绝,而无需修改结果的值。通常就做一些资源的清理工作。
5、链式请求
GitHubService.then(function(data){ }).then(function(data){ $scope.Users=data; });
Angular JS中 Promise用法的更多相关文章
- angular.js中 路由 用法及概念
在开讲之前,首先谈谈APP应用.平时我们用的app总是多页面,如果用原生安卓或者苹果,那当然很流畅啦.但是当我们用一般的html页面做移动端,简单时候我们可以用<a href="&qu ...
- Angular.js中处理页面闪烁的方法详解
Angular.js中处理页面闪烁的方法详解 前言 大家在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{xxx}}的情况.数据还没响应,但页面已经渲染了.这是因为浏览器和angularjs渲染 ...
- 秒味课堂Angular js笔记------Angular js中的工具方法
Angular js中的工具方法 angular.isArray angular.isDate angular.isDefined angular.isUndefined angular.isFunc ...
- (网页)Angular.js 中 copy 赋值与 = 赋值 区别
转自st.gg Angular.js 中 copy 赋值与 = 赋值 区别 为什么用 $scope.user = $scope.master; $scope.master 会跟着 $scope.use ...
- angular.js 中同步视图和模型数据双向绑定,$watch $digest $apply 机制
Angular.js 中的特性,双向绑定. 让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $ap ...
- angular.js 中的作用域 数据模型 控制器
1.angular.js 作为后起之秀的前端mvc框架,他于传统的前端框架都不同,我们再也不需要在html中嵌入脚本来操作对象了.它抽象出了数据模型,控制器及视图. 成功解耦了应用逻辑,数据模型,视图 ...
- 在Angular.js中的H5页面调用Web api时跨域问题处理
/// <summary> /// 被请求时 /// 在Angular.js中的H5页面调用Web api时跨域问题处理 /// </summary> /// <para ...
- Angular JS 中的服务注册方法
在Angular JS中创建服务的几种方法 factory() service() constant() value() provider() factory(name,fn(){}) 该服务为单例的 ...
- Angular JS中$timeout的用法及其与window.setTimeout的区别
$timeout的用法 angular.js的$timeout指令对window.setTimeout做了一个封装,它的返回值是一个promise对象.当定义的时间到了以后,这个promise对象就会 ...
随机推荐
- springboot系列之-log
配置文件以application.yml为例说明: Spring Boot默认的日志组件为Logback. 一. 日志配置参数: logging: file: #日志文件,绝对路径或相对路径 path ...
- cocos2d 艺术标签没有显示
今天自己挖了个坑,设置数字标签的时候,无论怎么搞,程序运行后还是显示的是普通文本数字,各种原因找了一半天,最后发现在资源名字.png的前面多了一个空格,眼瞎一直没看到,最后去掉就OK了
- FlashFXP 破解代码
FlashFXP RealKEY: ------------- 将以下内容COPY到软件里面的注册框即可 ------------- FLASHFXPwQAOlhkgwQAAAAC6W5MNJwTns ...
- JavaScript 使用词法作用域,没有动态作用域
function foo() { console.log( a ); } function bar() { var a = 3; foo(); } var a = 2; bar(); 上面的代码,控制 ...
- Python学习笔记——Day5(转载)
python 编码转换 主要介绍了python的编码机制,unicode, utf-8, utf-16, GBK, GB2312,ISO-8859-1 等编码之间的转换. 常见的编码转换分为以下几种情 ...
- IEnumerable 和 IQueryable 区别
IQueryable继承自IEnumerable,所以对于数据遍历来说,它们没有区别. 但是IQueryable的优势是它有表达式树,所有对于IQueryable的过滤,排序等操作,都会先缓存到表达式 ...
- HTML5外包
北京动点飞扬软件 从事html5外包业务五年,是国内第一家以HTML5移动平台.手机平台项目外包业务为主的正规软件团队, 欢迎联系 QQ:372900288 电话:13911652504 我们现已发展 ...
- 【freemaker】之文本,html文本,去除空格,字母大小写,循环数组,字符串截取,map取值,遍历map
测试代码 @Test public void test06(){ try { root.put("emp", "<span color='red'>你好张三& ...
- mysql:字符串转换为日期类型
函数:DATE_FORMAT http://www.w3school.com.cn/sql/func_date_format.asp
- c#数据类型之值类型和引用类型
C#数据类型分隔为值类型和引用类型.而所用数据类型都继承自Object. 1. 值类型继承自System.ValueType,引用类型继承自System.Object.ValueType也直接继承自O ...