使用参考资料Promise模式来简化JavaScript的异步回调.doc

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