自定义封装异步任务回调的执行
<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,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,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,onReject:onReject
}
}
}
我学到的东西;
原来可以这样将回调函数保存起来
// 声明属性 ,提供后面的成功或者失败后回调函数的使用
this.callBack={};
// 这个是保存回调函数
this.callBack={
onResolve:onResolve,onReject:onReject
}
// 调用成功的回调函数
if(self.callBack.onResolve){
self.callBack.onResolve(data)
}