class myPromise{
constructor(fn){
this.statusObj = {
PENDING:"PENDING",
RESOLVED:"RESOLVED",
REJECTED:"REJECTED",
}
this.value = null;//传递给then方法的value值
this.status = this.statusObj.PENDING;
this.resolvedCallBacks = [];
this.rejectedCallBacks = [];
myPromise.that = this;
try {
fn(myPromise.resolve,myPromise.rejected);//执行bew myPromise
} catch (error) {
myPromise.rejected(this.value);
}
}
/**
* 静态resolve方法,MyPromise实例不可访问;
* 支持类MyPromise访问,例:MyPromise.resolve('success').then(e=>e)
* @param value
*/
static resolve(value){
const that = myPromise.that;// 由于静态方法内的this访问的是类还不是实例,所以使用这种办法访问对象实例
const f = that instanceof myPromise
if(f&&that.status === that.statusObj.PENDING){
that.status = that.statusObj.RESOLVED;
that.value = value;
that.resolvedCallBacks.map(cb => that.value = cb(that.value));
}
// MyPromise 类访问resolve
if(!f){
const obj = new myPromise()
return Object.assign(obj,{
status:obj.statusObj.RESOLVED,
value
})
}
}
static rejected(value){
const that = myPromise.that;
const f = that instanceof myPromise;
if(f&&that.status == that.statusObj.REJECTED){
that.status = that.statusObj.REJECTED;
that.value = value;
that.rejectedCallBacks.map(cb => that.value = cb(that.value))
}
if(!f){
const obj = new myPromise();
return obj.assign(obj,{
status:that.statusObj.REJECTED,
value
})
}
}
/**
* MyPromise 原型上的then方法
* @param onFulfilled
* @param onRejected
*/
then(onFulfilled,onRejected){
const {PENDING,RESOLVED,REJECTED} = this.statusObj
const f = typeof onFulfilled === 'function' ? onFulfilled:c => c;
const r = typeof onRejected === 'function' ? onRejected : c => {throw c}
switch (this.status) {
case PENDING:
this.resolvedCallBacks.push(f)
this.rejectedCallBacks.push(f);
break;
case RESOLVED:
this.value = f(this.value)// 将回调函数的返回值赋值给实例的 value ,满足链式调用then方法时传递value
break;
case REJECTED:
this.value = r(this.value)// 将回调函数的返回值赋值给实例的 value ,满足链式调用then方法时传递value
break;
default:
break;
}
return this;
}
}
// new myPromise(resolve => {
// setTimeout(() => {
// resolve(1)
// }, 2000);
// }).then((res2) => {
// console.log(res2);
// return 2;
// }).then((res3) => {
// console.log(res3);
// })
myPromise.resolve('success').then((e) => {
console.log(e);
return e + 1;
}).then((res) => {
console.log(res);
});
手写promise(简易版)
最新推荐文章于 2024-08-03 20:32:29 发布