当前位置:网站首页>手写promise与async await
手写promise与async await
2022-07-05 14:32:00 【原谅我不够洒脱】
promise
先看看promise实现的效果
const Pro = new Promise((resolve,reject) => {
setTimeout(() => {
resolve(123)
}, 5000)
})
Pro.then((res) => {
console.log(res,'----')
})
// 运行代码5秒后控制台打印 123 "----"
自己实现
const PromiseFater = function(callBack) {
this.callBack = callBack
this.then = (back) => {
this.callBack(back)
}
}
const p = new PromiseFater((resolve, reject) => {
console.log(1)
setTimeout(() => {
resolve(123)
}, 5000)
})
p.then((res) => {
console.log(res, '---')
})
// 运行代码5秒后控制台打印 123 "---"
上面只是换了个方法阐述了promise的实现原理,
下面我们加上reject
这代码并不支持连续的.then().then(),只是分析了一下.then().catch()如何实现的,不想把代码搞得太多了,这样不方便看
class MyPromise {
constructor (callBack) {
if (typeof callBack !== 'function') {
throw new Error('必须传入一个函数')
}
// 添加状态
this.status = 'PENDING'
this.thenFun = [] // 存放.then传入的back方法
this.catchFun = [] // 存放.catch传入的back方法
try {
callBack(this.resolve, this.reject)
} catch (err) {
this.reject(err)
}
}
reject = (val) => {
this.status = 'fail'
this.catchFun(val)
}
resolve = (val) => {
this.status = 'success'
this.thenFun(val)
}
then = (back) => {
if (typeof back !== 'function') {
throw new Error('then参数必须传入一个函数')
}
this.thenFun = back
return this
}
catch = (back) => {
if (typeof back !== 'function') {
throw new Error('catch参数必须传入一个函数')
}
this.catchFun = back
return this
}
}
const promise = new MyPromise((resolve, reject) => {
setTimeout(() => {
reject('失败测试')
}, 2000);
})
promise
.then((res) => {
console.log(res)
})
.catch((res) => {
console.log(res)
})
// 运行,控制台上打印 失败测试
如果把
const promise = new MyPromise((resolve, reject) => {
setTimeout(() => {
reject('失败测试')
}, 2000);
})
换成
const promise = new MyPromise((resolve, reject) => {
setTimeout(() => {
resolve('成功测试')
}, 2000);
})
// 运行,控制台上打印 成功测试
如果想实现连续的.then().then(),可以将上面的thenFun 改成thenArr来保存每个then传入的方法,通过状态一次调用,但是何必呢,这样不说写着不好看,用async await他不香嘛
边栏推荐
猜你喜欢
直播预告|如何借助自动化工具落地DevOps(文末福利)
PHP - fatal error: allowed memory size of 314572800 bytes exhausted
浅谈Dataset和Dataloader在加载数据时如何调用到__getitem__()函数
微帧科技荣获全球云计算大会“云鼎奖”!
申请代码签名证书时如何选择合适的证书品牌?
leetcode:881. lifeboat
Thymeleaf th:with use of local variables
CYCA少儿形体礼仪 宁波市培训成果考核圆满落幕
FR练习题目---综合题
Shen Ziyu, nouveau Président de Meizu: M. Huang Zhang, fondateur de Meizu, agira comme conseiller stratégique pour les produits scientifiques et technologiques de Meizu
随机推荐
freesurfer运行完recon-all怎么快速查看有没有报错?——核心命令tail重定向
详解Vue适时清理keepalive缓存方案
Mysql database installation tutorial under Linux
APR protocol and defense
How to deeply understand the design idea of "finite state machine"?
There is a powerful and good-looking language bird editor, which is better than typora and developed by Alibaba
【leetcode周赛总结】LeetCode第 81 场双周赛(6.25)
微帧科技荣获全球云计算大会“云鼎奖”!
想进阿里必须啃透的12道MySQL面试题
R语言ggplot2可视化:可视化折线图、使用theme函数中的legend.position参数自定义图例的位置
【NVMe2.0b 14-9】NVMe SR-IOV
CPU设计实战-第四章实践任务三用前递技术解决相关引发的冲突
快消品行业SaaS多租户解决方案,构建全产业链数字化营销竞争力
外盘入金都不是对公转吗,那怎么保障安全?
Show strength. In this way, the mobile phone will not be difficult to move forward
申请代码签名证书时如何选择合适的证书品牌?
Introduction, installation, introduction and detailed introduction to postman!
World Environment Day | Chow Tai Fook serves wholeheartedly to promote carbon reduction and environmental protection
PMP考试20天能通过吗?
Share 20 strange JS expressions and see how many correct answers you can get