废话不多说直接上代码
class myPromise {
constructor(fn){
this.status = 'pending'; //当前状态
this.resolved = []; //成功队列
this.rejected = []; //失败队列
const resolve = (val) => { //成功函数
if(this.status !== 'pending'){ //promise 只有返回成功状态或失败状态,如果有一种状态了就返回
return
}
this.status = 'resolved'; //改变当前执行状态
setTimeout(() => { //为了让then函数先执行 (原理:宏任务会在微任务后执行)
this.resolved.map((task) => {//取出所有的resolve队列执行
task.apply(this,...val); //修正this指向
})
})
}
const reject = (val) => { //失败函数
if(this.status !== 'pending'){ //promise 只有返回成功状态或失败状态,如果有一种状态了就返回
return
}
this.status = 'rejected'; //改变当前执行状态
setTimeout(() => { //为了让then函数先执行 (原理:宏任务会在微任务后执行)
this.rejected.map((task) => { //取出所有的rejecte队列执行
task.apply(this,...val); //修正this指向
})
})
}
//执行传过来的fn
try{
fn(resolve,reject);
}catch(error){
reject(error)
}
}
then(resolveCallback,rejectCallback) { // then函数
resolveCallback = typeof resolveCallback == 'function'?resolveCallback:(v) => v; //判断回调是否为函数
rejectCallback = typeof rejectCallback == 'function'?rejectCallback:(error) => {throw error}; //判断回调是否为函数
return new myPromise((resolve,reject) => { //为了保持链式调用
this.resolved.push((val) => { //往resolve任务队列中添加任务
const res = resolveCallback(val); //执行回调函数
try{
res instanceof myPromise?res.then(resolve,reject):resolve(res); //判断当前是否返回的promise
}catch(error){
reject(error)
}
})
this.rejected.push((val) => { //往reject任务队列中添加任务
const res = rejectCallback(val); //执行回调函数
try{
res instanceof myPromise?res.then(resolve,reject):reject(res); //判断当前是否返回的promise
}catch(error){
reject(error)
}
})
})
}
}
const result = new myPromise((resolve,reject) =>{
resolve(1)
}).then((res) => {
console.log(res)
})