自定义封装异步任务回调的执行
<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) }
