手写promise自定义封装多个回调函数的执行

自定义封装多个回调函数的执行

<script src="./Promise.js"></script>
 let p = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('ok');
        }, 1000)
    })
p.then(res => {
    alert(res)
}, err => {
    console.log(err)
})
p.then(res => {
    console.log(res)
}, err => {
    console.log(err)
})

从上面这一段代码中，我们发现
只出现了console.log()
并没有出现alert()
因为我们出现了覆盖
第二个将第一个覆盖了；
所以我们使用
// 这个是保存回调函数
this.callBack={
    onResolve:onResolve,
    onReject:onReject
}
这样的保存回调函数是不合适的
我们应该将所有的回调函数保存起来
1==> 将之前声明的对象对象变成一个数组
// 声明属性成为一个数组
this.callBack=[];

2==> 保存回调的时候每一个都进行保存使用push方法
// 这个是保存回调函数
this.callBack.push(
    {
        onResolve:onResolve,
        onReject:onReject
    }
)

3==>将成功或者失败后的回调函数进行遍历
// 调用成功的回调函数进行遍历
self.callBack.forEach(item=>{
    item.onResolve(data)
})

// 调用失败的回调函数数进行遍历
self.callBack.forEach(item=>{
    item.onReject(err)
})

实现自定义封装多个回调函数的执行

function Promise(executor){
    const self=this;
    function resolve(data){
        // 如果状态发生改变就直接返回(为了让Promise的状态只发生一次改变)；
        if( self.PromiseStatus!=='pending') return
        self.PromiseStatus='resolved';
        self.PromiseValue=data;

        // 调用成功的回调函数进行遍历
        self.callBack.forEach(item=>{
            item.onResolve(data)
        })
    }
    // 同样声明成为一个函数;修改状态
    function reject(err){
        // 如果状态发生改变就直接返回(为了让Promise的状态只发生一次改变)；
        if( self.PromiseStatus!=='pending') return
        self.PromiseStatus='rejected';
        self.PromiseValue=err; 
        // 调用失败的回调函数数进行遍历
       self.callBack.forEach(item=>{
           item.onReject(err)
       })
    }
    this.PromiseStatus ='pending' ;
    this.PromiseValue =null;
    // 声明属性 new  add
    this.callBack=[];
    // 对异常进行处理；使用try catch
    try{
        executor(resolve,reject);
    }catch(err){
        reject(err);
    }
}
// 自定义封装then方法执行回调
Promise.prototype.then=function(onResolve,onReject){
    //{PromiseStatus:"resolved"PromiseValue:"ok"}
    if(this.PromiseStatus==='resolved'){
        onResolve(this.PromiseValue)
    }
    if(this.PromiseStatus==='rejected'){
        onReject(this.PromiseValue)
    }
    // 如果是pending的状态
    if(this.PromiseStatus==='pending'){
        // 这个是保存回调函数
        this.callBack.push(
            {
                onResolve:onResolve,
                onReject:onReject
            }
        ) 
    }
}