$q 实例分析 Angular 中的 Promise
相信有一些开发经验的朋友就应该知道,对于而言,十分重要,在开发中总能用到。因此掌握好它是一件必须做的事情。
我之前写过一篇文章,工作总结:高级应用之对象,介绍中的,因此关于的基础介绍就不再详细讲解,这篇文章会重点关注中的实现。
我们首先有一个简单的html标签,下面的例子都会基于这个标签来书写
$q
在中,$q是一个非常重要的。通过$q,有两种比较常用的方式来实现,分别是ES6风格与风格。
ES6风格实现
我们直接来看看js代码
angular.module('app', [])
.controller('demoController', function($q, $timeout) {var a = 1;$q(function(resolve, reject) {$timeout(function() {if(a == 1) {console.log('resolve');resolve('hello, JAKE'); } else {console.log('reject');reject('JAKE is not here!')}}, 2000)}).then(function(greeting) {console.log('success, ' + greeting);}, function(reason) {console.log('failed, ' + reason);})
})
当a==1,输出结果为
"resolve"
"success, hello, JAKE"
当a!=1,输出结果为
"reject"
"failed, JAKE is not here!"
点我查看实例地址
上例中,我直接将第一步逻辑在$q()中处理。回调函数有两个参数,, ,分别代表执行成功与失败。
然后在对应的逻辑里面,使用/标记逻辑的执行状态。then方法中的代码会在第一步的逻辑执行完了才执行,为了证明这一点,我在第一步的逻辑中设置了2秒的延迟。then会等待第一步执行完毕。
then有两个回调函数,分别表示执行成功和执行失败的回调,回调函数的参数为在第一步逻辑中标记方法传入的字符串。如果第一步逻辑执行成功,则会执行then第一个回调函数,如果失败,则会执行第二个回调。
风格
与实现类似,我们需要定义个defer对象,并在第一步逻辑中手动返回
angular.module('app', [])
.controller('demoController', function($q, $timeout) {var a = 1;$q.when(function() {var defer = $q.defer();$timeout(function() {defer.notify('notify jake.');if(a == 1) {console.log('rsolve');defer.resolve('hello, jake');}else {console.log('reject');defer.reject('jake is not here.')}}, 2000);return defer.promise;}()).then(function(greeting) {console.log('success, ' + greeting);}, function(reason) {console.log('fail, ' + reason);}, function(update) {console.log('notify, ' + update);})
})
当a==1,输出结果为
"rsolve"
"notify, notify jake."
"success, hello, jake"
当a!=1 输出结果为
"reject"
"notify, notify jake."
"fail, jake is not here."
点击我查看实例
中 的一些方法,其实从上面的实例就已经能够知道的大概用法,不算复杂。
1. then(, , )
从字面上我们就能够看出then三个回调的含义,第二个参数与第三个参数为可选。
2. catch()
相当于 then(null, )
3. (, )
无论的返回状态是上面,该方法总是会执行。
链式操作
如果then中逻辑的执行需要时间等待,那么,then中回调函数的返回值为对象时,才能够按顺序执行。因此需要我们手动返回一个对象,例子如下
var app = angular.module('app', []);app.controller('demoController', function($q, $timeout) {$q.when(function() {var defer = $q.defer();$timeout(function() {console.log('first');defer.resolve();}, 2000);return defer.promise;}()).then(function() {var defer = $q.defer();$timeout(function() {defer.resolve();console.log('second');}, 1000);return defer.promise;}).then(function() {console.log('third'); })
});
"first"
"second"
"third"
点我查看实例地址
官方文档中,认为then方法中只需要有返回值
但是如果then的执行不需要时间等待,then中的回调函数的第一个参数,会获取到上一个then的返回值,然后按顺序执行,如下例。
var app = angular.module('app', []);app.controller('demoController', function($q, $timeout) {function first() {var a = 1;var defer = $q.defer();$timeout(function() {if(a == 1) {console.log('first resolve');defer.resolve('resolve result'); } else {console.log('first reject');defer.reject();}}, 2000)return defer.promise;}var promiseA = first();promiseA.then(function(result) {// $timeout(function() {console.log('second, ' + result);return 'document';// }, 1000)}).then(function(result) {console.log('third, ' + result);})});
输出结果为
"first resolve"
"second, resolve result"
"third, document"
点我查看实例地址
因为表述起来并不是那么容易,因此建议大家通过实例慢慢理解。