手写promise自定义封装异步任务回调的执行

自定义封装异步任务回调的执行

<script type="text/javascript">
    let p = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('err');
        }, 1000)
    })
    // 这个then方法是由p这个promise调用的
    p.then(res => {
        console.log('res', res)
    }, err => {
        console.log(err)
    })
</script>

我们发现 1s 后并没有输出内容值
为什么回调没有去执行呢？
因为代码从上往下执行的时候
setTimeout(() => {
    reject('err');
}, 1000)是一个异步的；
然后去执行下面的代码，它是不会去等待异步的哈~
去执行下面的同步代码
p.then(res => {
    console.log('res', res)
}, err => {
    console.log(err)
})
然后去调用了p的then方法；
我们到知道，p的状态一直没有发生改变；
一直是pedding
而我们封装的Promise中的then方法中没有对pedding判定进行判断
状态一直没有发生变化
所以一直是无法输出内容

如何解决上面遇见的问题

我们现在要解决，1s后的成功回调这个问题；
我们知道，状态的改变是在resolve和reject中
所以，我们是要在对应的函数中去处理这个问题的哈

首先保存成功或者失败后的回调函数

<script src="./Promise.js"></script>
<script type="text/javascript">
    let p = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('err');
        }, 1000)
    })
    // 这个then方法是由p这个promise调用的
    p.then(res => {
        console.log('res', res)
    }, err => {
        console.log(err)
    })
    console.log(p)  //此时是可以输出保存的回调函数的哈
</script>

function Promise(executor){
    const self=this;
    function resolve(data){
        // 如果状态发生改变就直接返回(为了让Promise的状态只发生一次改变)；
        if( self.PromiseStatus!=='pending') return
        self.PromiseStatus='resolved';
        self.PromiseValue=data;
    }
    // 同样声明成为一个函数;修改状态
    function reject(err){
        // 如果状态发生改变就直接返回(为了让Promise的状态只发生一次改变)；
        if( self.PromiseStatus!=='pending') return
        self.PromiseStatus='rejected';
        self.PromiseValue=err;
    }
    this.PromiseStatus ='pending' ;
    this.PromiseValue =null;
    // 声明属性  -----提供后面的成功或者失败后回调函数的使用
    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={
            onResolve:onResolve,
            onReject:onReject
        }
    }
}

这个时候，我们打印 p
我们是知道 callBack 是有回调函数的；

自定义封装异步任务回调的执行(完整篇)

<script src="./Promise.js"></script>
<script type="text/javascript">
    let p = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('err');
        }, 1000)
    })
    // 这个then方法是由p这个promise调用的
    p.then(res => {
        console.log('res', res)
    }, err => {
        console.log(err)
    })
    console.log(p)
</script>

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

        // 调用成功的回调函数
        if(self.callBack.onResolve){
            self.callBack.onResolve(data)
        }
    }
    // 同样声明成为一个函数;修改状态
    function reject(err){
        // 如果状态发生改变就直接返回(为了让Promise的状态只发生一次改变)；
        if( self.PromiseStatus!=='pending') return
        self.PromiseStatus='rejected';
        self.PromiseValue=err;
        // 调用失败的回调函数
        if(self.callBack.onReject){
            self.callBack.onReject(err)
        }
    }
    this.PromiseStatus ='pending' ;
    this.PromiseValue =null;
    // 声明属性 ，提供后面的成功或者失败后回调函数的使用
    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={
            onResolve:onResolve,
            onReject:onReject
        }
    }
}

我学到的东西；
原来可以这样将回调函数保存起来
// 声明属性 ，提供后面的成功或者失败后回调函数的使用
 this.callBack={};
// 这个是保存回调函数
this.callBack={
    onResolve:onResolve,
    onReject:onReject
}
// 调用成功的回调函数
if(self.callBack.onResolve){
    self.callBack.onResolve(data)
}