手写Promise实践(1)
今天实现promise部分功能,供参考,若有不正确之处,烦请指出,共同进步。
实现如下功能:
1、状态不可逆
2、链式调用
3、promise值透传
4、setTimeout模拟微任务
代码如下:
function Promise(fn){
this.status = 'pending';
this.val = undefined;
this.resolveArr = [];
this.rejectArr = [];
const resolve = (val)=>{
setTimeout(()=>{
if(this.status !== 'pending') return;
this.status = 'fulfilled';
this.val = val;
this.resolveArr.forEach(fn=>{
fn(val);
})
})
};
const reject = (val) => {
setTimeout(()=>{
if(this.status !== 'pending') return;
this.status = 'rejected';
this.val = val;
this.rejectArr.forEach(fn=>{
fn(val);
})
})
}
try{
fn(resolve,reject)
}catch(e){
throw new Error()
}
}
Promise.prototype.then = function(success,error){
success = typeof success === 'function' ? success : res=>res;
error = typeof error === 'function' ? error : err=>err;
return new Promise((resolve,reject)=>{
switch(this.status){
case 'fulfilled':
setTimeout(()=>{
try{
let result = success(this.val);
resolve(result)
}catch(e){
reject(e)
}
})
break;
case 'rejected':
setTimeout(()=>{
try{
let result = error(this.val);
resolve(result)
}catch(e){
reject(e)
}
})
break;
default:
this.resolveArr.push(()=>{
try{
let result = success(this.val);
resolve(result)
}catch(e){
reject(e)
}
});
this.rejectArr.push(()=>{
try{
let result = error(this.val);
resolve(result)
}catch(e){
reject(e)
}
});
}
});
}
实例验证:
var promise = new Promise((resolve, reject) => {
setTimeout(()=>{
resolve('resolve');
reject('reject');
})
})
promise.then( res => {
console.log(res,'first then')
return res+'first'
}).then(res => {
console.log(res,'second then')
});
console.log(1)
真实promise 输出结果
实践实现promise输出结果
如图验证已实现promise的基本功能,如有考虑不周之处请不吝赐教