angular学习笔记(二十九)-$q服务
angular中的$q是用来处理异步的(主要当然是http交互啦~).
$q采用的是promise式的异步编程.什么是promise异步编程呢?
异步编程最重要的核心就是回调,因为有回调函数,所以才构成了异步编程,而回调有三个关键部分:
一是什么时候执行回调,二是执行什么回调,三是回调执行的时候传入什么参数.
就以最常见的jquery Ajax举例,发送一个请求后:
什么时候执行回调: 请求成功(或者失败)的时候
执行什么回调: 根据请求成功或者失败,执行相应的回调函数
回调执行的时候传入的什么参数: 也就是后台返回的数据
在过去大多数场景下,我们的异步编程都是这样的格式:
function a(callback1,callback2){ var bool; var data; /*a函数要做的事情,做完后会判断bool是true还是false,并且给data赋值*/; //a函数完事儿,根据a函数的执行结果执行相应的回调函数 if(bool){ callback1(data) } if(!bool){ callback2(data) } } a(function(data){ /*回调函数1的处理*/ },function(data){ /*回调函数2的处理*/ } )
运行: http://jsfiddle.net/s2ebjon0/
这个例子只有一次回调,但如果回调中还要嵌套回调:
function a(callback1,callback2){ var bool; var data; /*a函数要做的事情,做完后会判断bool是true还是false,并且给data赋值;*/ bool=true; data='code_bunny' //a函数完事儿,根据a函数的执行结果执行相应的回调函数 if(bool){ callback1(data,function(data){ console.log('success:'+data) },function(data){ console.log('fial:'+data) }) } if(!bool){ callback2(data) } } a(function(data,callback1,callback2){ alert('成功'+data); var dataNew; var bool; dataNew = data; bool = false; if(bool){ callback1(data) } if(!bool){ callback2(data) } },function(data){ /*回调函数2的处理*/ alert('失败'+data) } )
运行: http://jsfiddle.net/kbyy73dn/1/
我就不接着写如果回调中嵌套回调再嵌套回调再...
总之一句话,使用传统的回调函数作为参数来编写方式来实现异步,是十分麻烦的,代码可读性十分的差.而promise式的编程则把这个过程抽象化,只关注上面说到的三个关键点(什么时候执行回调,执行什么回调,回调执行的时候传入什么参数),在这篇文章不关心它究竟是如何做到的,只关心它是怎么使用的:
promise式异步有两个重要的对象,一个defer对象,一个promise对象,每个defer对象都有和它绑定的promise对象,他们之间的关系是一一对应的.defer对象负责告知promise对象什么时候执行回调,执行什么回调,回调执行的时候传入什么参数,而promise对象负责接收来自defer对象的通知,并且执行相应的回调.
举个最简单的例子:
var HttpREST = angular.module('Async',[]); HttpREST.controller('promise',function($q,$http){
//创建了一个defer对象;
var defer = $q.defer();
//创建了defer对象对应的promise
var promise = defer.promise;
//promise对象定义了成功回调函数,失败回调函数
promise.then(function(data){console.log('成功'+data)},function(data){console.log('失败'+data)});
//对promise发起通知: 1.执行这段代码的时候就是执行回调的时候, 2.调用resolve方法,表示需要被执行的是成功的回调, 3.resolve里的参数就是回调执行的时候需要被传入的参数
defer.resolve('code_bunny') });
下面来看下$q的完整api
$q的方法:
一. $q.defer():
返回一个对象.一般把它赋值给defer变量:
var defer = $q.defer()
※defer的方法:
(一)defer.resolve(data)
对promise发起通知,通知执行成功的回调,回调执行的参数为data
(二)defer.reject(data)
对promise发起通知,通知执行失败的回调,回调执行的参数为data
(三)defer.notify(data)
对promise发起通知,通知执行进度的回调,回调执行的参数为data
※defer的属性:
(一)defer.promise
※defer.promise的属性:
1.defer.promise.$$v
promise的$$v对象就是对应的defer发送的data,当defer还没有发送通知时,$$v为空.
有一点很重要,假设,我们令$scope.a = defer.promise,那么页面在渲染{{a}}时,使用的是a.$$v来渲染a这个变量的.并且修改a变量,视图不会发生变化,需要修改a.$$v,视图才会被更新,具体请参考:
http://www.cnblogs.com/liulangmao/p/3907307.html
※defer.promise的方法:
1.defer.promise.then([success],[error],[notify]):
.then方法接受三个参数,均为函数,函数在接受到defer发送通知时被执行,函数中的参数均为defer发送通知时传入的data.
[success]: 成功回调,defer.resolve()时调用
[error]: 失败回调,defer.reject()时调用
[notify]: 进度回调,defer.notify()时调用
.then()方法返回一个promise对象,可以接续调用.then(),注意,无论.then()是调用的success函数,还是error函数,还是notify函数,发送给下一个promise对象的通知一定是成功通知,而参数则是函数的返回值.也就是说,then()方法里的函数被执行结束后,即为下一个promise发送了成功通知,并且把返回值作为参数传递给回调.
eg1: (单次调用)
html:
<!DOCTYPE html> <html ng-app = 'Async'> <head> <title>19. $q异步编程</title> <meta charset="utf-8"> <script src="angular.js"></script> <script src="script.js"></script> </head> <body> <div ng-controller = "promise"> <h3>{{name}}</h3> </div> </body> </html>
js:
var HttpREST = angular.module('Async',[]); //defer.resolve(),defer.reject(),defer.notify() HttpREST.controller('promise',function($q,$http,$scope){ var defer = $q.defer(); //创建了一个defer对象; var promise = defer.promise; //创建了defer对象对应的promise promise.then(function(data){$scope.name='成功'+data},function(data){$scope.name='失败'+data},function(data){$scope.name='进度'+data}); $http({ method:'GET', url:'/name' }).then(function(res){ defer.resolve(res.data) },function(res){ defer.reject(res.data) }) });
如果正确创建后台对于'/name'的请求处理,在一秒后返回'code_bunny',则一秒后页面显示:
如果后台没有创建对于'/name'的请求处理,则页面直接显示:
eg2: (链式调用)
html:
<!DOCTYPE html> <html ng-app = 'Async'> <head> <title>19. $q异步编程</title> <meta charset="utf-8"> <script src="angular.js"></script> <script src="script.js"></script> </head> <body> <div ng-controller = "promise"> <h3>{{name}}</h3> <h3>{{name2}}</h3> </div> </body> </html>
js:
var HttpREST = angular.module('Async',[]); //.then()的链式调用 HttpREST.controller('promise',function($q,$http,$scope){ var defer = $q.defer(); //创建了一个defer对象; var promise = defer.promise; //创建了defer对象对应的promise promise.then(function(data){ $scope.name='成功'+data; return data+'2' },function(data){ $scope.name='失败'+data; return data+'2' },function(data){ $scope.name='进度'+data; return data+'2' }).then(function(data){ $scope.name2 = '成功'+data },function(data){ $scope.name2 = '失败'+data }); $http({ method:'GET', url:'/name' }).then(function(res){ defer.resolve(res.data) },function(res){ defer.reject(res.data) }) });
如果正确创建后台对于'/name'的请求处理,在一秒后返回'code_bunny',则一秒后页面显示:
,可以看到,第一个.then()的成功的回调返回的data+'2'这个值,被传到了下一个.then()的成功回调的data参数中
如果后台没有创建对于'/name'的请求处理,则页面直接显示:
,可以看到,就算第一个.then()调用的是失败回调,但是它发给下一个promise的通知依然是成功通知,data值就是失败回调的返回值
2.defer.promise.catch([callback])
相当于.then(null,[callback])的简写. 直接传入失败回调.返回一个promise对象.发给下一个promise对象的通知依然是成功通知.data值就是回调的返回值.
*很早的angualr版本是没有这个方法的.
eg:
html:
<!DOCTYPE html> <html ng-app = 'Async'> <head> <title>19. $q异步编程</title> <meta charset="utf-8"> <script src="angular.js"></script> <script src="script.js"></script> </head> <body> <div ng-controller = "promise"> <h3>{{name}}</h3> <h3>{{name2}}</h3> </div> </body> </html>
js:
//.catch() HttpREST.controller('promise', function ($q, $http, $scope) { var defer = $q.defer(); //创建了一个defer对象; var promise = defer.promise; //创建了defer对象对应的promise promise.catch(function (data) { $scope.name = data; return data+2 }).then(function (data) { $scope.name2 = '成功' + data }, function (data) { $scope.name2 = '失败' + data }); $http({ method: 'GET', url: '/name' }).then(function (res) { defer.resolve(res.data) }, function (res) { defer.reject(res.data) }) });
后台不创建'/name'的get请求响应, 得到的结果如下: 
可以看到,promise对象收到通知,执行失败回调,然后返回新的promise,对新的promise来说,收到的通知还是执行成功回调.回调的参数是catch里的函数的返回值.如果写成:
promise.then(null,function (data) { $scope.name = data; return data+2 }).then(function (data) { $scope.name2 = '成功' + data }, function (data) { $scope.name2 = '失败' + data });
两者是完全一致的.
注意,如果后台正确创建了'/name'的get请求响应, 那么,得到的结果会是:
也就是说,catch()方法如果收到的通知不是执行失败回调,而是执行成功回调,它直接返回一个promise对象进行链式调用,等于把成功通知传给了下一个promise.
由于catch([callback])方法得到的和.then(null,[callback])方法是完全一致的,代码上也米有精简多少,所以一般就直接用.then就好了.
3.defer.promise.finally([callback])
.finally只接受一个回调函数,而且这个回调函数不接受参数.无论defer发送的通知是成功,失败,进度,这个函数都会被调用.
.finally也返回一个promise对象,和上面两个方法不同的是,它为下一个promise对象发送的通知不一定是成功通知,而是传给finally的通知类型.也就是说,如果defer给promise发送的是失败通知,那么,finally()得到的promise它收到的也会是失败通知,得到的参数也不是finally的返回值,而是第一个defer发出的通知所带的data.
*很早的angualr版本是没有这个方法的.
eg:
html:
<!DOCTYPE html> <html ng-app = 'Async'> <head> <title>19. $q异步编程</title> <meta charset="utf-8"> <script src="angular.js"></script> <script src="script.js"></script> </head> <body> <div ng-controller = "promise"> <h3>{{name}}</h3> <h3>{{name2}}</h3> </div> </body> </html>
js:
//.finally() HttpREST.controller('promise', function ($q, $http, $scope) { var defer = $q.defer(); //创建了一个defer对象; var promise = defer.promise; //创建了defer对象对应的promise promise.finally(function () { $scope.name = '已接收通知';
return 'code_dog';
}).then(function (data) { $scope.name2 = '成功' + data }, function (data) { $scope.name2 = '失败' + data }); $http({ method: 'GET', url: '/name' }).then(function (res) { defer.resolve(res.data) }, function (res) { defer.reject(res.data) }) });
后台不创建'/name'的get请求响应, 得到的结果如下: 
后台正确创建'/name'的get请求响应, 得到结果如下:
可以看到,当promise收到通知的时候执行了fianlly里的回调,然后返回的promise收到的通知和第一个promise收到的通知是一致的,不会受到finally中的回调的任何影响.
-------------------------------------------------------------------------------------------------------------------------------------------------------
二. $q.reject(data):
这个方法(在我的认知范围里),就只能在promise的.then(funciton(){})函数里面调用.作用是给.then()返回的下一个promise发送错误信息,并且给错误回调传入参数data
eg1:(.then方法里使用)
html:
<!DOCTYPE html> <html ng-app = 'Async'> <head> <title>19. $q异步编程</title> <meta charset="utf-8"> <script src="angular.js"></script> <script src="script.js"></script> </head> <body> <div ng-controller = "promise"> <h3>{{name}}</h3> <h3>{{name2}}</h3> </div> </body> </html>
js:
HttpREST.controller('promise', function ($q, $http, $scope) {
var defer = $q.defer(); //创建了一个defer对象;
var promise = defer.promise; //创建了defer对象对应的promise
promise.then(function (data) {
return $q.reject(data+'2')
},function(){
return $q.reject(data+'2')
}).then(function (data) {
$scope.name2 = '成功' + data
}, function (data) {
$scope.name2 = '失败' + data
});
$http({
method: 'GET',
url: '/name'
}).then(function (res) {
defer.resolve(res.data)
}, function (res) {
defer.reject(res.data)
})
});
后台正确创建'/name'的get请求响应时,得到的结果是:
后台没有正确创建'/name'的get请求响应时,得到结果:
可以看到,在then()方法的函数中,用$q.reject(data)来包装返回值,可以给下一个返回的promise发送失败通知并发送data参数.所以无论promise收到的是成功通知还是失败通知,下一个promise收到的都是失败通知.
eg2:(.finally方法里调用)
html:
<!DOCTYPE html> <html ng-app = 'Async'> <head> <title>19. $q异步编程</title> <meta charset="utf-8"> <script src="angular.js"></script> <script src="script.js"></script> </head> <body> <div ng-controller = "promise"> <h3>{{name}}</h3> <h3>{{name2}}</h3> </div> </body> </html>
js:
HttpREST.controller('promise', function ($q, $http, $scope) {
var defer = $q.defer(); //创建了一个defer对象;
var promise = defer.promise; //创建了defer对象对应的promise
promise.finally(function () {
return $q.reject('code_dog')
}).then(function (data) {
$scope.name2 = '成功' + data
}, function (data) {
$scope.name2 = '失败' + data
});
$http({
method: 'GET',
url: '/name'
}).then(function (res) {
defer.resolve(res.data)
}, function (res) {
defer.reject(res.data)
})
});
无论后台是否正确创建'/name'的get请求响应,得到结果都是:
.因为.finally()的回调是不能接受到data参数的.所以返回值都是一样.
上面已经说过,使用.finally方法的时候,回调是不能接受参数的,回把对promise发的通知原封不动的(成功失败,data)发送给下一个promise对象.
但是,如果我在.finally的回调里用$q.reject(data)来包装了返回值,那么发送给下一个promise的通知会以$q.reject(data)为准,也就是'失败通知',回调参数为data.
三. $q.all([promise1,promise2,...]):
$q.all接受一个数组类型的参数,数组的值为多个promise对象.它返回一个新的promise对象.
当数组中的每个单一promise对象都收到了成功通知,这个新的promise对象也收到成功通知(回调参数是一个数组,数组中的各个值就是每个promise收到的data,注意顺序不是按照单个promise被通知的顺序,而是按照[promise1,promise2]这个数组里的顺序)
当数组中的某个promise对象收到了失败通知,这个新的promise对象也收到失败通知,回调参数就是单个promise收到的失败通知的回调参数
eg:
html:
<!DOCTYPE html> <html ng-app = 'Async'> <head> <title>19. $q异步编程</title> <meta charset="utf-8"> <script src="angular.js"></script> <script src="script.js"></script> <style type="text/css"> h4 { color:red } </style> </head> <body> <div ng-controller = "promise"> <h3>{{name1}}</h3> <h3>{{name2}}</h3> <h3>{{age1}}</h3> <h3>{{age2}}</h3> <h4>{{three}}</h4> </div> </body> </html>
js:
//$q.all() HttpREST.controller('promise', function ($q, $http, $scope) { var defer1 = $q.defer(); //创建了一个defer1对象; var promise1 = defer1.promise; //创建了defer1对象对应的promise1 var defer2 = $q.defer(); //再创建了一个defer2对象; var promise2 = defer2.promise; //创建了新的defer2对象对应的promise2 //promise1收到通知后执行的回调:给name1和name2赋值
promise1.then(function (data) { $scope.name1 = data; return data+'.2' },function(data){ $scope.name1 = data; return data+'.2' }).then(function (data) { $scope.name2 = 'promise1成功' + data }, function (data) { $scope.name2 = 'promise1失败' + data });
//promise2收到通知后执行的回调:给age1和age2赋值 promise2.then(function (data) { $scope.age1 = data; return data+'.2' },function(data){ $scope.age1 = data; return data+'.2' }).then(function (data) { $scope.age2 = 'promise2成功' + data }, function (data) { $scope.age2 = 'promise2失败' + data });
//创建一个promise3,它依赖于promise1和promise2 var promise3 = $q.all([promise1,promise2]); promise3.then(function(data){ $scope.three = data; },function(data){ $scope.three = data; }); $http({ method: 'GET', url: '/name' }).then(function (res) { defer1.resolve(res.data) }, function (res) { defer1.reject(res.data) }); $http({ method: 'GET', url: '/age' }).then(function (res) { defer2.resolve(res.data) }, function (res) { defer2.reject(res.data) }) });
(1)后台node正确创建两个get请求的响应:
app.get('/name',function(req,res){
setTimeout(function(){res.send('code_bunny')},2000)
});
app.get('/age',function(req,res){
setTimeout(function(){res.send('18')},1000)
});
一秒后显示:
两秒后显示:
可以看到,当promise1和promise2都收到成功通知后,promise3也收到成功通知,而它的回调的参数data就是一个数组,数组里的两个值分别是promise1收到的data和promise2收到的data,注意顺序,这里先收到通知的是promise2,但是promise3的data数组里值的顺序和promise收到通知的顺序无关.只和$q.all([])这个数组里的顺序一致.
(2)后台node只创建了'/name'一个get请求的响应:
显示结果:
可以看到,由于'/age'请求错误,promise2被通知失败,所以promise3也立刻被通知失败,收到的data参数也和promise2收到的data一致
四. $q.when(obj,[success],[error],[notify]):
.when接受四个参数,其中,第二,第三,第四个参数都是函数,相当于promise.then()里面的三个参数. 第一个参数有两种可能:
1. 第一个参数不是promise对象: 直接调用成功回调,回调的参数就是第一个参数本身
eg:
html:
//$q.when() HttpREST.controller('promise', function ($q, $http, $scope) { $q.when('code_dog',function(data){ $scope.name = data; return data+'2' },function(data){ $scope.name = data; return data+'2' }).then(function (data) { $scope.name2 = '成功' + data }, function (data) { $scope.name2 = '失败' + data }); });
显示结果:
.when()的第一个参数不是promise对象,而是字符串'code_dog',所以它直接执行成功回调,也会返回下一个promise进行链式调用, 和一般的.then()是没有区别的.
在这种情况下其实不需要传入第三,第四个参数,因为第一个参数如果不是promise,那么它只会执行成功回调.
2. 第一个参数是一个promise对象:
当这个promise对象收到通知的时候,调用回调.回调就是第二,三,四个参数...(相当于.then([success],[error],[notify]))
另外,.when()返回的对象也就相当于.then()返回的对象.都是一个新的promise对象,都可以接收到回调发送的通知和参数...
可以理解为,
var defer = $q.defer();
defer.promise.then([success],[error],[notify])
这一段也可以写成:
var defer = $q.defer();
$q.when(defer.promise,[success],[error],[notify])
eg:
html:
<!DOCTYPE html> <html ng-app = 'Async'> <head> <title>19. $q异步编程</title> <meta charset="utf-8"> <script src="angular.js"></script> <script src="script.js"></script> </head> <body> <div ng-controller = "promise"> <h3>{{name}}</h3> <h3>{{name2}}</h3> </div> </body> </html>
js:
//$q.when() HttpREST.controller('promise', function ($q, $http, $scope) { var defer = $q.defer(); //创建了一个defer对象; var promise = defer.promise; //创建了defer对象对应的promise $q.when(promise,function(data){ $scope.name = data; return data+'2' },function(data){ $scope.name = data; return data+'2' }).then(function (data) { $scope.name2 = '成功' + data }, function (data) { $scope.name2 = '失败' + data }); /* 这样写得到的结果也是等价的. promise.then(function(data){ $scope.name = data; return data+'2' },function(data){ $scope.name = data; return data+'2' }).then(function (data) { $scope.name2 = '成功' + data }, function (data) { $scope.name2 = '失败' + data }); */ $http({ method: 'GET', url: '/name' }).then(function (res) { defer.resolve(res.data) }, function (res) { defer.reject(res.data) }); });
和注释掉的那一段写法完全等价.
所以,在这种情况下.when()只是对.then()的一个包装.
最后,api里面说到:defer对象发送消息不会立即执行的，而是把要执行的代码放到了rootScope的evalAsync队列当中，当时scope.$apply的时候才会被promise接收到这个消息。
虽然不太明白这段话的意思,个人理解是大多数时候,scope是会自动$apply的...如果在什么时候遇到promise没有收到通知,那么就试试看scope.$apply执行一下.
完整代码:https://github.com/OOP-Code-Bunny/angular/tree/master/OREILLY/19%20%24q%E5%92%8Cpromise