异步Promise实现

简介　

　　异步回调的书写往往打乱了正常流的书写方式，在ECMAScript 6中实现了标准的Promise API，旨在

解决控制回调流程的问题。

　　简单的实现了Promise API：　

       (function(w){
             function Promise(fn){
                 return this instanceof Promise ? this.init(fn) : new Promise(fn);
             }
             Promise.fulfill = function(m){return m;};
             Promise.reject = function(m){throw m;};
             Promise.map = {
                 resolve: "onFulfill",
                 reject: "onReject"
             }
             //异步自动生成promise并执行
             Promise.resolve = function(fn){
                 var p = new Promise();
                 setTimeout(function(){
                     p.resolve();
                 },0);
                 if(fn)
                     p.callback["onFulfill"] = fn;
                 return p;
             };
             Promise.all = function(){
                 var p = new Promise(),
                         args;
                 var counter = 0,ret = [];//收集结果，并传给p
                 var v,fn; //传入的函数，执行该函数，将结果保存至ret
                 if(arguments.length > 1){
                     args = [].slice.apply(arguments)
                 }else if({}.toString.call(arguments[0]) == "[object Array]"){
                     args = arguments[0];
                 }
                 for(var i=0,len=args.length;i<len;i++){
                     if(typeof args[i] == "function"){
                         args[i] = Promise.resolve(args[i]);
                     }

                     (function(i){
                         args[i].then(function(m){
                             ret.push(m);
                             if(--counter <= 0){
                                 ret.length = len;
                                 p.resolve(ret);
                             }
                         },function(){
                             p.reject();
                         });
                     })(i)
                     counter++;
                 }
                 return p;
             };
             Promise.prototype = {
                 init: function(fn){
                     var that = this;
                     this.state = 'pending';
                     this.callback = {
                         onFulfill: Promise.fulfill,
                         onReject: Promise.reject
                     };
                     this.dirty = false;
                     this._next = null;
                     setTimeout(function(){
                         fn && fn.call(that,that.resolve.bind(that),that.reject.bind(that));
                     },0)

                 },
                 then: function(onFulfill,onReject){
                     return post.call(this,onFulfill,onReject);
                 },
                 wait: function(mills){ //promise链在wait处被分裂成2段
                     var p = new Promise(),
                             start = new Date().getTime();
                     var id = setTimeout(function(){ //传入时间
                         p.resolve([this.val,new Date().getTime() - start])
                     },mills);
                     p.cancel = function(){
                         clearTimeout(id);
                     }
                     return p;
                 }
             }
             function post(onFulfill,onReject,onNotify,onComplete){
                 var p = new Promise(),
                         that = this;
                 if(arguments.length <= 2){
                     that._next = p;
                     that.callback["onFulfill"] = onFulfill;
                     that.callback["onReject"] = onReject;
                     this.dirty = true;
                 }
                 return p;
             }
             function fire(promise,method){
                 var next = "resolve",val,
                         args = arguments[2];
                 if(promise.state == "pending"){
                     try{
                         promise.val = val = promise.callback[Promise.map[method]].apply(promise,args);
                         promise.state = method;
                     }catch(e){
                         promise.val = val = e;
                         next = "reject";
                     }

                     if(val && isPromise(val)){
                         val._next = promise._next;
                     }else{
                         if(promise._next){
                             fire(promise._next,next,[val]);
                         }
                     }

                 }
                 return promise;
             }
             function isPromise(o){
                 return o && typeof o == "object" && o.then && typeof o.then == "function";
             }
             "reject,resolve".replace(/\w+/g,function(m){
                 Promise.prototype[m] = function(){
                     return fire(this,m,arguments);
                 }
             })

             w.Promise = Promise;
         })(window)

示例

　　示例内容为依次加载网页内容的各个元素：先加载标题，并根据服务器返回的url信息，到相应的文件中加载

内容，并以此显示。

       var getJson = function(url){
             return new Promise(function(resolve,reject){
                 var that = this;
                 var xhr = new XMLHttpRequest();
                 if(!window.Promise)return;
                 xhr.open('get',url);
                 xhr.onreadystatechange = function(e){
                     if(xhr.readyState == 4){
                         if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
                             resolve(xhr.responseText); log(that)
                         }else{
                             reject(new Error('response error'));
                         }
                     }
                 };
                 xhr.onerror = function(e){
                     reject(new Error('ajax error'));
                 }
                 xhr.send();
             });
         };

         var body = document.body;
         var addHtml = function(html){
             if(typeof  html != 'string') return;
             var p = document.createElement('p');
             p.textContent = html;
             body.insertBefore(p,loading);
         };
         var addHead = function(html){
             if(typeof html !== 'string') return;
             var h = document.createElement('h2');
             h.textContent = html;
             body.insertBefore(h,loading);
         }
         var log = function(msg){console.log(msg)};
         var loading = document.getElementById('loading');

          getJson('../json/head.json').then(JSON.parse).then(function(html){
             addHead(html.content);
             Promise.all(html.urls.map(getJson)).then(function(arr){
                 arr.forEach(function(content){
                     addHtml(JSON.parse(content).content);
                 })
          },function(e){
                 log('error in loading content: '+ e);
            })
          },function(e){
              log('error: ' + e);
          }).then(function(){
             loading.style.display = 'none';
          })

         getJson('../json/head.json').then(JSON.parse).then(function(html){
             addHead(html.content);
             var promise = Promise.resolve();
             html.urls.forEach(function(url,i){
                 promise = promise.then(function(){
                     return getJson(url);
                 }).then(JSON.parse).then(function(html){
                     addHtml(html.content);
                 },function(e){
                     log('error in loading body: '+ e );
                 }).then(function(){
                     if(i == html.urls.length-1)
                         loading.style.display = 'none';
                 })
             })
         })

示范

　　Promise API控制流程，尤其是对于异步操作而言，流程非常清晰，开飞相对容易。