概述
异步编程离不开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的缺点是对于每个异步方法,都需要用构造函数封装一遍,如果有其它需求,则需要更特别的封装。
- 打算找个时间用事件响应重新实现一遍,目前代码有点乱,如果用事件响应的话可能会更加优雅。