手写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)
}
遇见问题,这是你成长的机会,如果你能够解决,这就是收获。
作者:晚来南风晚相识
出处: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)
微信
如果文中有什么错误,欢迎指出。以免更多的人被误导。