仓库源文，站点原文

title: 细嗅Promise categories:

• JavaScript
• 前端杂烩 tags:
• tech
• cnblogs
• 异步
• Promise mark: hot date: 2014-09-29 08:39:00 fromUrl: http://www.cnblogs.com/hustskyking/archive/2014/09/29/promise.html from: 博客园

// DOM ready之后执行
$(document).ready(function(){
    // 获取模板
    $.get(url, function(tpl){
        // 获取数据
        $.get(url2, function(data){
            // 构建 DOMString
            makeHtml(tpl, data, function(str){
                // 插入到 DOM 中
                $(obj).html(str);
            });
        });
    });
});

new Promise(ready).then(getTpl).then(getData).then(makeHtml).resolve();

promise(ok).then(ok_1).then(ok_2).then(ok_3).reslove(value)------+
         |         |          |          |                       |
         |         |          |          |        +=======+      |
         |         |          |          |        |       |      |
         |         |          |          |        |       |      |
         +---------|----------|----------|--------→  ok() ←------+
                   |          |          |        |   ↓   |
                   |          |          |        |   ↓   |
                   +----------|----------|--------→ ok_1()|
                              |          |        |   ↓   |
                              |          |        |   ↓   |
                              +----------|--------→ ok_2()|
                                         |        |   ↓   |
                                         |        |   ↓   |
                                         +--------→ ok_3()-----+
                                                  |       |    |
                                                  |       |    ↓
@ Created By Barret Lee                           +=======+   exit

事务一：     获取模板
               ↓
事务二：     获取数据
               ↓
事务三： 拼合之后插入到 DOM

var Promise = function(affair){
    this.state = "pending";
    this.affair = affair || function(o) { return o; };
    this.allAffairs = [];
};

Promise.prototype.then = function (nextAffair){
    var promise = new Promise();
    if (this.state == "resloved"){
        // 如果当前状态是已完成，则这个事务将会被立即执行
        return this._fire(promise, nextAffair);
    }else{
        // 否则将会被加入队列中
        return this._push(promise, nextAffair);
    }
};

Promise.prototype._fire = function (nextPromise, nextAffair){
    var nextResult = nextAffair(this.result);
    if (nextResult instanceof Promise){
        nextResult.then(function(obj){
            nextPromise.resolve(obj);
        });
    }else{
        nextPromise.resolve(nextResult);
    }
    return nextPromise;
};

> start
> end （1s之后输出）

function delay(data){
    // 创建一个子事务
    var promise = new Promise();
    setTimeout(function(){
        console.log(data);
        // 一秒之后才启动子事务，模拟异步延时
        promise.resolve();
    }, 1000);
    return promise;
}
// 主事务
var promise = new Promise(function(data){
    console.log(data);
    return "end";
});
promise.then(delay);
promise.resolve("start");

<h4><span>三、包含错误传递的 Promise</span></h4>

new Promise(function(resolve, reject){
    resolve("start");
}).then(function(data){
    console.log(data);
    throw "error";
}).catch(function(err){
    console.log(err);
    return "end";
}).then(function(data){
    console.log(data)
});

new Promise(function(resolve, reject){
    // ...
});

promise.then(
    function(value){/* code here */},
    function(reason){/* code here */}
);

promise.resolve();
promise.reject();

promise.catch();
// 等价于
promise.then(null, function(reason){});

promise.all();
promise.race();

function Promise(resolver){
    this.status = "pending";
    this.value = null;
    this.handlers = [];
    this._doPromise.call(this, resolver);
}

_doPromise: function(resolver){
    var called = false, self = this;
    try{
        resolver(function(value){
            // 如果没有 call 则继续，并标记 called 为 true
            !called && (called = !0, self.resolve(value));
        }, function(reason){
            // 同上
            !called && (called = !0, self.reject(reason));
        });
    } catch(e) {
        // 同上，捕获错误，传递错误到下一个 then 事务
        !called && (called = !0, self.reject(e));
    }
},

resolve: function(value) {
    try{
        if(this === value){
            throw new TypeError("流程已完成，不能再次开启流程！");
        } else {
            // 如果还有子事务队列，继续执行
            value && value.then && this._doPromise(value.then);
        }
        // 执行完了之后标记为完成
        this.status = "fulfilled";
        this.value = value;
        this._dequeue();
    } catch(e) {
        this.reject(e);
    }
},
reject: function(reason) {
    // 标记状态为出错
    this.status = "rejected";
    this.value = reason;
    this._dequeue();
},

_dequeue: function(){
    var handler;
    // 执行事务，直到队列为空
    while (this.handlers.length) {
        handler = this.handlers.shift();
        this._handle(handler.thenPromise, handler.onFulfilled, handler.onRejected);
    }
},

_handle: function(thenPromise, onFulfilled, onRejected){
    var self = this;

    setTimeout(function() {
        // 判断下次操作采用哪个函数，reject 还是 resolve
        var callback = self.status == "fulfilled"
                       ? onFulfilled
                       : onRejected;
        // 只有是函数才会继续回调
        if (typeof callback === "function") {
            try {
                self.resolve.call(thenPromise, callback(self.value));
            } catch(e) {
                self.reject.call(thenPromise, e);
            }
            return;
        }
        // 否则就将 value 传递给下一个事务了
        self.status == "fulfilled"
                        ? self.resolve.call(thenPromise, self.value)
                        : self.reject.call(thenPromise, self.value);
    }, 1);
},

then: function(onFulfilled, onRejected){
    var thenPromise = new Promise(function() {});

    if (this.status == "pending") {
        this.handlers.push({
            thenPromise: thenPromise,
            onFulfilled: onFulfilled,
            onRejected: onRejected
        });
    } else {
        this._handle(thenPromise, onFulfilled, onRejected);
    }

    return thenPromise;
}

$.ajax({
    url: url
}).done(function(data, status, xhr){
    //...
}).fail(function(){
    //...
});

$.ajax({
    url: url,
    success: function(data){
        //...
    },
    error: funtion(){
        //...
    }
});

$.when(taskOne, taskTwo).done(function () {
    console.log("都执行完毕后才会输出我！");
}).fail(function(){
    console.log("只要有一个失败，就会输出我！")
});

Promise.all([true, Promise.resolve(1), ...]).then(function(value){
    //....
});

Promise.race([true, Promise.resolve(1), ...]).then(function(value){
    //....
}, function(reason){
    //...
});

function taskA(){
    setTimeout(function(){
        var result = "A";
        E.emit("taskA", result);
    }, 1000);
}

function taskB(){
    setTimeout(function(){
        var result = "B";
        E.emit("taskB", result);
    }, 1000);
}

E.all(["taskA", "taskB"], function(A, B){
    return A + B;
});

<p>我没有看他的源码，但是想想，应该是这个逻辑。只需要在消息中心管理各个 emit 以及消息注册。这里的错误处理值得思考下。</p>

<p>在半年前，也写过一篇关于异步编程的文章：<a href="http://www.cnblogs.com/hustskyking/p/javascript-asynchronous-programming.html">JavaScript异步编程原理</a>，感兴趣的可以去读一读。</p>

<h3 id="_7"><a class="headeranchor-link" name="user-content-_7" href="#_7"></a>第四章 小结</h3>

<h4 id="_8"><a class="headeranchor-link" name="user-content-_8" href="#_8"></a>一、小结</h4>

<p>文章比较长，阅读了好几天别人写的东西，自己提笔还是比较轻松的，本文大概花费了 6 个小时撰写。</p>

<p>本文主要解说了 Promise 的应用场景和实现原理，如果你能够顺畅的读完全文并且之处文中的一些错误，说明你已经悟到了：）</p>

<p>Promise 使用起来不难，但是理解其原理还是有点偏头痛的，所以下面列举的几篇相关阅读也建议读者点进去看看。</p>

<h4 id="_9"><a class="headeranchor-link" name="user-content-_9" href="#_9"></a>二、相关阅读</h4>