如何实现一个ECMAScript 6 的promise功能

Promise最先是CommonJS工作组提出的一种规范之一，目的是为了解决js异步编程过程中，回调嵌套过深的问题。ECMAScript 6 规范化了Promise对象的语言接口，使其成了js的原生对象之一。

如果你还不了解ECMAScript 6 中的Promise对象，建议阅读http://es6.ruanyifeng.com/#docs/promise。ECMAScript 6 中的Promise对象与一些常用的promise库（如jquery，when.js）中的实现略有不同，本文讨论的实现，以ECMAScript 6 为准。 下面，我们来一起学习，如何在不支持ES6的浏览器上实现Promise，如有不对的地方，还请多多指正。

首先，我们来看看Promise构造函数。

var Promise = function (fun) {
    var me = this,
        resolve = function (val) {
            me.resolve(val);
        },
        reject = function (val) {
            me.reject(val);
        }
    me._st = 'pending';
    me._rsq = [];
    me._rjq = [];
    (typeof fun === 'function') && fun(resolve, reject);
}
var fn = Promise.prototype;

构造函数接受一个异步的回调函数，并调用，回调函数的2个参数，分别为异步操作成功和失败时候要调用的改变Promise实例状态的方法。 _st用于存放当前实例的状态，初始值为”pending”，异步操作成功为”resolve”，失败为”reject”。_rsq用于存放异步操作成功的回调队列，_rjq用于存放异步操作失败的回调队列。 同时，把Promise.prototype挂在变量fn上，接下我们只要给fn添加方法就可以了。

.then和.catch方法

fn.then = function (resolve, reject) {
    this._rsq.push(resolve);
    this._rjq.push(reject);
    return this;
}
fn.catch = function (reject) {
    return this.then(null, reject);
}

.then方法接受2个参数，成功回调和失败回调，把它们分别push到rsq和rjq上即可，返回this用于实现链式调用。 而.catch方法只是.then(null, reject)的一个别名，内部调一下即可。

.resolve和.reject方法

fn.resolve = function (val) {
    if (this._st === 'resolved' || this._st === 'pending') {
        this._st = 'resolved';
        this._doQ(val);
    }
}
fn.reject = function (val) {
    if (this._st === 'rejected' || this._st === 'pending') {
        this._st = 'rejected';
        this._doQ(val);
    }
}

.resolve方法接受一个参数，为上个回调函数的返回值，或者是上个异步操作函数的reslve函数的参数值。如果实例的状态为resolved或者pending的时候，才调用._doQ方法（下面会讲到）。 .reject方法则反之。

._doQ方法

fn._doQ = function (val) {
    if (!this._rsq.length && !this._rjq.length) {
        return;
    }

    var resolve = this._rsq.shift(),
        reject = this._rjq.shift(),
        ret;

    if (this._st === 'resolved' && typeof resolve === 'function') {
        ret = resolve(val);
    }
    if (this._st === 'rejected' && typeof reject === 'function') {
        ret = reject(val);
    }
    if (!(ret instanceof Promise)) {
        var _ret = ret;
        ret = new Promise(function (resolve) {
            setTimeout(function () {
                resolve(_ret);
            });
        });
    }
    ret._rsq = this._rsq.splice(0);
    ret._rjq = this._rjq.splice(0);
}

._doQ方法用于执行异步队列，会分别从rsq和rjq里抽出第一项，根据实例状态来执行，返回值存在ret变量。 如果ret不是一个Promise实例，则把ret的值暂存到_ret，新new一个Promise实例挂到ret上，并异步出发一个ret的reslve，传进_ret，最后，把this的_rsq和_rjq分别转移到ret上。 这样，this的异步回调队列被清空， 接下来的回调从ret上开始执行，如果有多个，就会出发这个步骤。

到此可以看出。.then方法实现链式调用并添加回调函数，而内部的._doQ则保证了回调的顺序执行。

Promise.all静态方法

Promise.all = function (arr) {
    var pms = new Promise();
    var len = arr.length,
        i = 0,
        res = 0;
    while (i < len) {
        arr[i].then(
            function () {
                if (++res === len) {
                    pms.resolve();
                }
            },
            function (val) {
                pms.reject(val);
            }
        );
        i++;
    }
    return pms;
}

Promise.all接受一个有promise对象的数组，并内部new了一个promise对象pms返回。当数组中所有的对象状态都成功的时候，执行pms.resolve()，即返回的promise对象状态变成resloved， 若数组有一个失败，则pms.reject(val)。

Promise.resolve静态方法，这个好像没啥好讲的。

Promise.resolve = function (obj) {
    var pms = new Promise();
    if (obj && typeof obj.then === 'function') {
        for (var i in pms) {
            obj[i] = pms[i];
        }
        return obj;
    }
    else {
        setTimeout(function () {
            pms.resolve(obj);
        });
        return pms;
    }
}

完整的代码，我放在https://github.com/hanan198501/promise了，大家可以上去看看，也欢迎关注我的github。

转自我的blog：http://cssha.com/ecmascript6-promise/

转自http://www.html-js.com/article/JavaScript-tips-on-how-to-implement-a-ECMAScript-6-promise-patch