手写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
}
)
}
}
遇见问题,这是你成长的机会,如果你能够解决,这就是收获。
作者:晚来南风晚相识
出处:https://www.cnblogs.com/IwishIcould/
本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
如果文中有什么错误,欢迎指出。以免更多的人被误导。
出处:https://www.cnblogs.com/IwishIcould/
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!
万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
![](http://images.cnblogs.com/cnblogs_com/IwishIcould/1900124/t_201214043958支付宝收款码.jpg?a=1607924145179)
支付宝
![](http://images.cnblogs.com/cnblogs_com/IwishIcould/1900124/t_20121604194271E6E296CCB71A007F4E22073D5EB64A.jpg)
微信
如果文中有什么错误,欢迎指出。以免更多的人被误导。