$q采用的是promise式的异步编程.什么是promise异步编程呢?
异步编程最重要的核心就是回调,因为有回调函数,所以才构成了异步编程,而回调有三个关键部分:
- 一是什么时候执行回调,
- 二是执行什么回调,
- 三是回调执行的时候传入什么参数
原理
promise式异步有两个重要的对象,一个defer对象,一个promise对象,每个defer对象都有和它绑定的promise对象,他们之间的关系是一一对应的
defer对象负责告知promise对象什么时候执行回调,执行什么回调,回调执行的时候传入什么参数
而promise对象负责接收来自defer对象的通知,并且执行相应的回调.
- defer负责告诉promise，什么时候干什么事
- promise对象负责接收defer对象的通知，并且去执行响应的事情。
exp
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')
});
api
一. 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](http://www.cnblogs.com/liulangmao/p/3907307.html)
※defer.promise的方法:
1.defer.promise.then([success],error,notify):
.then方法接受三个参数,均为函数,函数在接受到defer发送通知时被执行,函数中的参数均为defer发送通知时传入的data.
[success]: 成功回调,defer.resolve()时调用
.then()方法返回一个promise对象,可以接续调用.then(),注意,无论.then()是调用的success函数,还是error函数,还是notify函数,发送给下一个promise对象的通知一定是成功通知,而参数则是函数的返回值.也就是说,then()方法里的函数被执行结束后,即为下一个promise发送了成功通知,并且把返回值作为参数传递给回调.
image.png
EXP
<!DOCTYPE html>
<html ng-app = 'Async'>
<head>
<title>19. $q异步编程</title>
<meta charset="utf-8">
</head>
<body>
<div ng-controller = "promise">
<h3>{{name}}</h3>
</div>
</body>
</html>
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<script>
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:'https://www.runoob.com/angularjs/angularjs-tutorial.html'
}).then(function(res){
defer.resolve(res.data)
},function(res){
defer.reject(res.data)
})
});
</script>
网友评论