Promise
一 介绍
1.什么是promise
我们知道JavaScript语言的执行环境是“单线程”,所谓单线程,就是一次只能够执行一个任务,如果有多个任务的话就要排队,前面一个任务完成后才可以继续下一个任务。
这种“单线程”的好处就是实现起来比较简单,容易操作;坏处就是容易造成阻塞,因为队列中如果有一个任务耗时比较长,那么后面的任务都无法快速执行,或导致页面卡在某个状态上,给用户的体验很差。
当然JavaScript提供了“异步模式”去解决上述的问题,关于“异步模式”JavaScript提供了一些实现的方法:回调函数(callbacks)、事件监听、Promise对象。callback是最最简单的机制,可是用这种机制的话必须牺牲控制流、异常处理和函数语义化为代价,甚至会让我们掉进出现callback大坑,而promise解决了这个问题。
这种“单线程”的好处就是实现起来比较简单,容易操作;坏处就是容易造成阻塞,因为队列中如果有一个任务耗时比较长,那么后面的任务都无法快速执行,或导致页面卡在某个状态上,给用户的体验很差。
当然JavaScript提供了“异步模式”去解决上述的问题,关于“异步模式”JavaScript提供了一些实现的方法:回调函数(callbacks)、事件监听、Promise对象。callback是最最简单的机制,可是用这种机制的话必须牺牲控制流、异常处理和函数语义化为代价,甚至会让我们掉进出现callback大坑,而promise解决了这个问题。
2.Promise是一种异步方式处理值(或者非值)的方法,promise是对象,代表了一个函数最终可能的返回值或者抛出的异常。
在与远程对象打交道时,Promise会非常有用,可以把它们看作远程对象的一个代理。
在与远程对象打交道时,Promise会非常有用,可以把它们看作远程对象的一个代理。
优点:使
用了promise的收获之一是逃脱了回调的固定思维逻辑。promise让异步处理的机制看上去更像是同步,基于同步函数我们可以按照预期来捕获返回值
和异常值。可以在程序中的任何时刻捕捉错误,并且绕过依赖于程序异常的后续代码,我们不需要思考这个同步带来的好处。因此使用promise的目的是:获
取功能组合和错误冒泡能力的同时,保持代码异步运行的能力。
二 使用
用了promise的收获之一是逃脱了回调的固定思维逻辑。promise让异步处理的机制看上去更像是同步,基于同步函数我们可以按照预期来捕获返回值
和异常值。可以在程序中的任何时刻捕捉错误,并且绕过依赖于程序异常的后续代码,我们不需要思考这个同步带来的好处。因此使用promise的目的是:获
取功能组合和错误冒泡能力的同时,保持代码异步运行的能力。
二 使用
1.想要在angularjs中创建promise,可以使用内置的$q服务,$q服务在它的deferred API中提供了一些方法。
我
们可以先使用$q的defer()方法创建一个deferred对象,然后通过deferred对象的promise属性,将这个对象变成一个
promise对象;这个deferred对象还提供了三个方法,分别是resolve(),reject(),notify()。
们可以先使用$q的defer()方法创建一个deferred对象,然后通过deferred对象的promise属性,将这个对象变成一个
promise对象;这个deferred对象还提供了三个方法,分别是resolve(),reject(),notify()。
2.先了解一下任务的状态
每个任务都有三种状态:未完成(pending)、完成(fulfilled)、失败(rejected)。
pending状态:可以过渡到履行或拒绝状态。
fulfilled状态:不能变为其他任何状态,而且状态不能改变,必须有value值。
rejected状态:不能变为其他任何状态,而且状态不能改变,必须有reason。
pending状态:可以过渡到履行或拒绝状态。
fulfilled状态:不能变为其他任何状态,而且状态不能改变,必须有value值。
rejected状态:不能变为其他任何状态,而且状态不能改变,必须有reason。
3.deffered对象
(1)deffered 对象的方法
resolve(value):resolve函数用这个值来执行deferred promise,在声明resolve()处,表明promise对象由pending状态转变为resolve。
reject(reason):它等同于使用一个“拒绝”来执行一个promise,在声明resolve()处,表明promise对象由pending状态转变为rejected。
notify(value) :在声明notify()处,表明promise对象unfulfilled状态,在resolve或reject之前可以被多次调用。
resolve(value):resolve函数用这个值来执行deferred promise,在声明resolve()处,表明promise对象由pending状态转变为resolve。
reject(reason):它等同于使用一个“拒绝”来执行一个promise,在声明resolve()处,表明promise对象由pending状态转变为rejected。
notify(value) :在声明notify()处,表明promise对象unfulfilled状态,在resolve或reject之前可以被多次调用。
(2)deffered 对象属性
promise :最后返回的是一个新的deferred对象 promise 属性,而不是原来的deferred对象。这个新的Promise对象只能观察原来Promise对象的状态,而无法修改deferred对象的内在状态可以防止任务状态被外部修改。
promise :最后返回的是一个新的deferred对象 promise 属性,而不是原来的deferred对象。这个新的Promise对象只能观察原来Promise对象的状态,而无法修改deferred对象的内在状态可以防止任务状态被外部修改。
4.promise对象
promise对象的方法
(1)then(successFunc,
errorFunc,
notifyFunc):无论promise是成功了还是失败了,当结果可用之后,then都会立刻异步调用successFunc,或者
'errorFunc',在promise被执行或者拒绝之前,notifyFunc可能会被调用0到多次,以提供过程状态的提示。
(2)catch(errorCallback) —— promise.then(null, errorCallback) 的快捷方式
(3)finally(callback) ——让你可以观察到一个 promise 是被执行还是被拒绝, 但这样做不用修改最后的 value值。 这可以用来做一些释放资源或者清理无用对象的工作,不管promise 被拒绝还是解决。
errorFunc,
notifyFunc):无论promise是成功了还是失败了,当结果可用之后,then都会立刻异步调用successFunc,或者
'errorFunc',在promise被执行或者拒绝之前,notifyFunc可能会被调用0到多次,以提供过程状态的提示。
(2)catch(errorCallback) —— promise.then(null, errorCallback) 的快捷方式
(3)finally(callback) ——让你可以观察到一个 promise 是被执行还是被拒绝, 但这样做不用修改最后的 value值。 这可以用来做一些释放资源或者清理无用对象的工作,不管promise 被拒绝还是解决。
5.举例
HTML部分:
<div ng-app="MyApp">
<div ng-controller="MyController">
<label for="flag">成功
<input id="flag" type="checkbox" ng-model="flag" /><br/>
</label>
<hr/>
<button ng-click="handle()">点击我</button>
</div>
</div>
JS部分:
<div ng-controller="MyController">
<label for="flag">成功
<input id="flag" type="checkbox" ng-model="flag" /><br/>
</label>
<hr/>
<button ng-click="handle()">点击我</button>
</div>
</div>
JS部分:
angular.module("MyApp", [])
.controller("MyController", ["$scope", "$q", function ($scope, $q) {
$scope.flag = true;
$scope.handle = function () {
var deferred = $q.defer(); //创建deferred对象
var promise = deferred.promise; //创建promise对象
.controller("MyController", ["$scope", "$q", function ($scope, $q) {
$scope.flag = true;
$scope.handle = function () {
var deferred = $q.defer(); //创建deferred对象
var promise = deferred.promise; //创建promise对象
promise.then(function (result) { //then方法传递两个处理函数
alert("Success: " + result); //promise被执行时进行
}, function (error) { //promise被拒绝时进行
alert("Fail: " + error);
});
if ($scope.flag) {
deferred.resolve("you are lucky!"); //给promise传值
} else {
deferred.reject("sorry, it lost!");
}
}
}]);
如
果异步操作成功,则用resolve方法将Promise对象的状态变为“成功”(即从pending变为resolved);如果异步操作失败,则用
reject方法将状态变为“失败”(即从pending变为rejected)。最后返回 deferred.promise
,我们就可以链式调用then方法。
果异步操作成功,则用resolve方法将Promise对象的状态变为“成功”(即从pending变为resolved);如果异步操作失败,则用
reject方法将状态变为“失败”(即从pending变为rejected)。最后返回 deferred.promise
,我们就可以链式调用then方法。
再来一个小例子:
var ngApp=angular.module('ngApp',[]);
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();
});
}]);
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();
});
}]);
6.使用then进行链式请求
promiseB = promiseA.then(function(result) {
return result + 1;
});
// promiseB 将会在处理完 promiseA 之后立刻被处理,
// 并且其 value值是promiseA的结果增加1