1、案例
Promise
用于对异步操作的进行数据处理,为异步操作的回调函数提供接口,让其在可同步执行,而不用再将回调函数进行层层嵌套。
例如,我们以下面的例子为例:
Index
对于异步函数,如果不进行回调函数嵌套,我们就无法保证其执行顺序。但是有了Promise
对象之后,我们可以进行链式书写,从而保证回调执行的顺序。
Index
2、Promise的基本语法
Promise
对象是一个代理对象(代理一个值),被代理的值在Promise
对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法(handlers
)。 这让异步方法可以像同步方法那样返回值,但并不是立即返回最终执行结果,而是一个能代表未来出现的结果的promise
对象。
根据以上描述,我们可以知道,Promise
对象可以代理一个异步处理的结果。所以Promise有fulfilled
(已成功)状态和rejected
(已失败)两个状态,对应Promise
构造函数的两个回调函数:resolve
和reject
。
new Promise( function(resolve, reject) {...} /* executor */ );
在执行回调函数之前,Promise
的状态为pedding
,当执行resolve
后状态变为fulfilled
,执行reject
之后装态变为rejected
。
原型方法:
//添加一个拒绝(rejection) 回调到当前 promise, 返回一个新的promise。
Promise.prototype.catch(onRejected)
//添加一个拒绝(rejection) 回调到当前 promise, 返回一个新的promise。当这个回调函数被调用,新 promise 将以它的返回值来resolve,否则如果当前promise 进入fulfilled状态,则以当前promise的完成结果作为新promise的完成结果.
Promise.prototype.then(onFulfilled, onRejected)
//无论当前promise的状态是完成(fulfilled)还是失败(rejected),都会执行
Promise.prototype.finally(onFinally)
3、Jquery中的deferred对象
Jquery中的deferred
对象是原生Promise
接口的实现。用法大同小异。
在ajax
中我们可以直接使用,因为1.5版本之后,ajax返回的值就是一个defeered
对象。
旧的写法:
$.ajax({
url: "test.html",
success: function(){
alert("成功了!");
},
error:function(){
alert("出错啦!");
}
});
新的写法:
//更简洁的链式写法
$.ajax("test.html")
.done(function(){ alert("成功了!"); })
.fail(function(){ alert("出错啦!"); });
而且deferred
对象不仅仅是在ajax中使用,也可以在任何回调中进行使用。
比如:
var $dfd = $.Deferred();//创建一个deferred实例对象
var success = 0;//模拟成功失败状态
window.setTimeout(() => {
if(success === 0){
$dfd.resolve();
}else{
$dfd.reject();
}
}, 100);
//两种写法:
$dfd.done(function(){
alert('成功');
}).fail(function(){
alert('失败');
});
//------另一种写法
$dfd.then(function(){
alert('成功');
},function(){
alert('失败');
});
同样的道理,使用deferred
对象重写书写上面的案例:
Index