JavaScript异步回调的Promise模式封装实例
网页的交互越来越复杂，JavaScript的异步操作也随之越来越多。如常见的ajax请求，需要在请求完成时响应操作，请求通常是异步的，请求的过程中用户还能进行其他的操作，不会对页面进行阻塞，这种异步的交互效果对用户来说是挺有友好的。但是对于开发者来说，要大量处理这种操作，就很不友好了。异步请求完成的操作必须预先定义在回调函数中，等到请求完成就必须调用这个函数。这种非线性的异步编程方式会让开发者很不适应，同时也带来了诸多的不便，增加了代码的耦合度和复杂性，代码的组织上也会很不优雅，大大降低了代码的可维护性。情况再复杂点，如果一个操作要等到多个异步ajax请求的完成才能进行，就会出现回调函数嵌套的情况，如果需要嵌套好几层，那你就只能自求多福了。
先看看下面这个常见的异步函数。
varshowMsg=function(){
setTimeout(function(){
alert("hello");
},5000);
};
如果要给该函数添加回调，通常会这么干。
varshowMsg=function(callback){
setTimeout(function(){
alert("hello");
//此处添加回调
callback();
},5000);
};
如果是使用easy.js的Promise，添加回调的方法就会优雅多了，前提是需要将原函数封装成一个promise实例。
varshowMsg=function(){
//构造promise实例
varpromise=newE.Promise();
setTimeout(function(){
alert("hello");
//改变promise的状态
promise.resolve("done");
},5000);
//返回promise实例
returnpromise;
};
将一个普通的函数封装成一个promise实例，有3个关键步骤，第一步是在函数内部构造一个promise实例，第二步是部署函数执行完去改变promise的状态为已完成，第三步就是返回这个promise实例。每个promise实例都有3种状态，分别为pending(未完成)、resolved(已完成，成功)、rejected(已拒绝，失败)。下面再来看看如何添加回调。
这样就将回调函数和原来的异步函数彻底的分离了，从代码组织上看，优雅了很多。resolve接受一个参数，该参数就可以轻松实现将数据传送给使用then方法添加的回调中。 then方法接受2个函数作为参数，第一个函数是已完成的回调，第二个就是已失败的回调。 requests.then(function(arg1,arg2){ when方法是将多个promise实例存到一个数组中，等到该数组的所有promise实例都是已完成状态才去执行已完成的回调，一旦有一个实例是已拒绝的状态，则立即执行已拒绝的回调。 Promise模式是CommonJS的规范之一。很多主流的JavaScript库都有相应的实现，如jQuery和Dojo中，都有Deferred去实现这些功能。在这里还是要吐槽下jQuery的Deferred，撇开其内部使用，这应该用户使用率最低的一个模块了，这和其较复杂的使用方式有一定的关系。
showMsg().then(function(str){
//回调添加到这里来了
callback(str);
});
对于ajax请求，easy.js直接将ajax方法封装成了promise对象，可以直接添加then方法来回调。
E.ajax({
url:"test1.php",
type:"GET"
})
.then(function(){
//添加请求成功的回调
},function(){
//添加请求失败的回调
});
如果有上面提到的多个ajax请求的情况呢？那么就要用到when这个方法了。该方法可以接受多个promise实例作为参数。
varrequests=E.when(E.ajax({
url:"test1.php",
type:"GET"
}),E.ajax({
url:"test2.php",
type:"GET"
}));
console.log("success："+arg1[0]+arg2[0]);
},function(arg1,arg2){
console.log("failure："+arg1+arg2 );
});
相关文章