实现简易Promise

概述

异步编程离不开promise, async, 事件响应这些东西，为了更好地异步编程，我打算探究一下promise的实现原理，方法是自己实现一个简易的promise。

根据promise mdn上的描述，我们主要实现如下api：

Promise.prototype.resolve
Promise.prototype.reject
Promise.prototype.then
Promise.all
Promise.race

为了更好地性能和使用，我还需要加上惰性求值特性，即：只有调用then的时候才真正调用Promise里面的异步方法。并且我们忽略pending，fulfilled和rejected这几个状态，因为封装后的promise并没有暴露这几个状态，目前看来也没什么用（除非用事件响应实现Promise）。

为了简便，暂时不考虑错误处理。

实现resolve，reject和then

其实就是调用resolve和reject的时候调用相应的success和error函数就行，代码如下：

let Promise = function(func) {
    this.func = func;
    this.success = null;
    this.error = null;
}
Promise.prototype.resolve = function(value, that) {
    console.log('resolve');
    if(typeof that.success == 'function') {
        that.success(value);
    }
}
Promise.prototype.reject = function(value, that) {
    console.log('reject');
    if(typeof that.error == 'function') {
        that.error(value);
    }
}
Promise.prototype.then = function(onFulfilled, onRejected) {
    this.success = onFulfilled;
    this.error = onRejected;
    setTimeout(() => {
        this.func(this.resolve, this.reject);
    });
}
let myPromise = new Promise(function(resolve, reject){
    setTimeout(() => {
        resolve("成功!", this);
    }, 1000);
});
myPromise.then((successMessage) => {
    console.log('输出', successMessage);
});

需要注意的是，这里如果不带入this的话，resolve里面的this就会丢失。

但是这么写不优雅，我想了很多办法，比如重新包装一下，比如用事件响应，但还是解决不了，最后我突然想到，用bind，哇，成功解决。代码如下：

let Promise = function(func) {
    this.func = func;
    this.success = null;
    this.error = null;
}
Promise.prototype.resolve = function(value) {
    if(typeof this.success == 'function') {
        this.success(value);
    }
}
Promise.prototype.reject = function(value) {
    if(typeof this.error == 'function') {
        this.error(value);
    }
}
Promise.prototype.then = function(onFulfilled, onRejected) {
    this.success = onFulfilled;
    this.error = onRejected;
    setTimeout(() => {
        this.func(this.resolve.bind(this), this.reject.bind(this));
    });
}
let myPromise = new Promise(function(resolve, reject){
    setTimeout(() => {
        resolve("成功!", this);
    }, 1000);
});
myPromise.then((successMessage) => {
    console.log('输出', successMessage);
});

值得一提的是，为了实现惰性求值，需要先把异步方法缓存起来，等调用then的时候再调用它。

还有，在Promise内部，为了简便，我使用的是setTimeout进行异步，并没有使用setImmediate。

实现all和race

all和race在多异步promise里面非常有用，下面我们来实现它们：

Promise.all = function(promiseArr) {
    let results = [];
    let sum = promiseArr.length;
    let count = 0;
    return new Promise(function(resolve, reject) {
        if(promiseArr || sum) {
            for(let i=0; i<sum; i++) {
                promiseArr[i].then((res) => {
                    results[i] = res;
                    count ++;
                    if(count >= sum) {
                        resolve(results);
                    }
                });
            }
        }
    });
};
Promise.race = function(promiseArr) {
    let sum = promiseArr.length;
    let count = 0;
    return new Promise(function(resolve, reject) {
        if(promiseArr || sum) {
            for(let i=0; i<sum; i++) {
                promiseArr[i].then((res) => {
                    if(count == 0) {
                        count ++;
                        resolve(res);
                    }
                });
            }
        }
    });
};

可以看到，方法是使用传说中的哨兵变量，真的很有用。

测试

简易的测试代码如下：

let myPromise1 = new Promise(function(resolve, reject){
    setTimeout(() => {
        resolve("成功1111111!");
    }, 1000);
});
let myPromise2 = new Promise(function(resolve, reject){
    setTimeout(() => {
        resolve("成功222222222222!");
    }, 1500);
});
myPromise1.then((successMessage) => {
    console.log('输出', successMessage);
});
console.time('all计时开始');
Promise.all([myPromise1, myPromise2]).then((results) => {
    results.map(item => {
        console.log('输出', item);
    });
    console.timeEnd('all计时开始');
});
console.time('race计时开始');
Promise.race([myPromise1, myPromise2]).then((res) => {
    console.log('输出', res);
    console.timeEnd('race计时开始');
});

可以看到，all计时刚好1.5秒，race计时刚好1秒。

我学到了什么

对Promise的理解更加深入。
对bind的使用更加熟练。
可以看到，Promise的缺点是对于每个异步方法，都需要用构造函数封装一遍，如果有其它需求，则需要更特别的封装。
打算找个时间用事件响应重新实现一遍，目前代码有点乱，如果用事件响应的话可能会更加优雅。