JavaScript異步編程的Promise模式

參考：

http://www.infoq.com/cn/news/2011/09/js-promise

http://www.cnblogs.com/rubylouvre/p/3495286.html

https://segmentfault.com/a/1190000000684654

目的：為了降低異步編程的復雜性

 

promise模式在任何時刻都處於以下三種狀態之一：未完成（unfulfilled）、已完成（resolved）和拒絕（rejected）

//構建promise模式的框架
    var Promise = function(){
        // initialize promise
    }
    //定義then方法——接受兩個參數用於處理完成和拒絕狀態
    Promise.prototype.then = function(onResolved, onRejected){
        //invoke handlers based upon state transition
    }
    //兩個方法來執行從未完成到已完成和從未完成到拒絕的狀態轉變
    Promise.prototype.resolve = function(value){
        //未完成----->已完成
    }
    Promise.prototype.reject = function(error){
        //未完成------>拒絕
    }

 

現在搭建了一個promise的架子，我們可以繼續上面的示例，假設只獲取IE10的內容。創建一個方法來發送Ajax請求並將其封裝在promise中。這個promise對象分別在xhr.onload和xhr.onerror中指定了完成和拒絕狀態的轉變過程，請注意searchTwitter函數返回的正是promise對象。然后，在loadTweets中，使用then方法設置完成和拒絕狀態對應的回調函數。

 即then接收兩個參數，成功則調用第一個，否則調用第二個

   function search(term){
        var url,xhr,results,promise;
        url = "http://search.twitter.com/search.json?rpp=100&q="+term;
        promise = new Promise();
        xhr = new XMLHttpRequest();
        xhr.open('GET',url,true);

        xhr.onload = function(e){
            if(this.status === 200){
                results = JSON.parse(this.responseText);
                promise.resolve(results);
            }
        };

        xhr.onerror = function(e){
            promise.reject(e);
        };

        xhr.send();
        return promise;
    }

    function loadTweets(){
        var container = doucment.getElementById('container');
        seach("#IE10").then(function(data){
            data.results.forEach(function(tweet){
                var el = document.createElement('li');
                el.innerText = tweet.text;
                container.appendChild(el);
            });
            
        },handleError);
    }

到目前為止，我們可以把promise模式應用於單個Ajax請求，似乎還體現不出promise的優勢來。下面來看看多個Ajax請求的並發協作。此時，我們需要另一個方法when來存儲准備調用的promise對象。一旦某個promise從未完成狀態轉化為完成或者拒絕狀態，then方法里對應的處理函數就會被調用。when方法在需要等待所有操作都完成的時候至關重要。

Promise.when = function(){
        //handle promises arguments and queue each
    }
    var container, promise1, promise2;
    container = document.getElementById('container');
    promise1 = search('#IE10');
    promise2 = search('#IE9');
    Promise.when(promise1,promise2).then(function(data1,data2){
        //Reshuffle due to date
        var totalResults = concatResults(data1.results, data2.results);
        totalResults.forEach(function(tweet){
            var el = document.createElement('li');
            el.innerText = tweet.text;
            container.appendChild(el);
        });
    },handleError);