promise模式

js 异步编程风格

promise模式在任何时刻都处于以下三种状态之一：未完成（unfulfilled）、已完成（resolved）和拒绝（rejected）。

promise.then(resolvedHandler, rejectedHandler)//针对已完成和拒绝状态的处理，可以在resolvedHandler方法中返回自己的promise组成级联 then().then(), 如果没有自己的promise则then()返回原始的promise

promise 状态只能改变一次unfulfilled>resolved or unfulfilled>rejected,状态改变后执行对应的回调，若在添加回调时状态已经改变则回调立即执行。

 

原始回调

function searchTwitter(term, onload, onerror) {

 

     var xhr, results, url;

     url = 'http://search.twitter.com/search.json?rpp=100&q=' + term;

     xhr = new XMLHttpRequest();

     xhr.open('GET', url, true);

 

     xhr.onload = function (e) {

         if (this.status === 200) {

             results = JSON.parse(this.responseText);

             onload(results);

         }

     };

 

     xhr.onerror = function (e) {

         onerror(e);

     };

 

     xhr.send();

 }

 

 function handleError(error) {

     /* handle the error */

 }

 

 function concatResults() {

     /* order tweets by date */

 }

 

 function loadTweets() {

     var container = document.getElementById('container');

 

     searchTwitter('#IE10', function (data1) {

         searchTwitter('#IE9', function (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);

     }, handleError);

 }

promise方式

var Promise = function () {

        /* initialize promise */

    };

Promise.prototype.then = function (onResolved, onRejected) {

     /* invoke handlers based upon state transition */

 };

Promise.prototype.resolve = function (value) {

     /* move from unfulfilled to resolved */

 };

 

 Promise.prototype.reject = function (error) {

     /* move from unfulfilled to rejected */

 };



function searchTwitter(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 = document.getElementById('container');

    searchTwitter('#IE10').then(function (data) {

        data.results.forEach(function (tweet) {

            var el = document.createElement('li');

            el.innerText = tweet.text;

            container.appendChild(el);

        });

    }, handleError);

}

promise原理

var defer = function () {

    var pending = [], value;

    return {

        resolve: function (_value) {

            value = _value;

            for (var i = 0, ii = pending.length; i < ii; i++) {

                var callback = pending[i];

                callback(value);

            }

            pending = undefined;

        },

        then: function (callback) {

            if (pending) {

                pending.push(callback);

            } else {

                callback(value);

            }

        }

    }

};

 

 

reference:

http://acgtofe.com/posts/2015/03/promise-from-zero/

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