教你一步步实现一个简易promise
作者:IT棉被 时间:2024-04-26 17:11:37
目录
step1 搭建框架
step2 填充搭建好了的Promise框架
总结
step1 搭建框架
1. 首先我们需要在这里放置一个promise函数本体 后面要在里面添加resolve、reject的执行函数
function Promise(execotor) {}
2. 原装promise中有then与catch这两个主要的方法,所以我们要给promise的原型挂载then与catch
Promise.prototype.then = function (onResolved, onRejected) {}
Promise.prototype.catch = function (onRejected) {}
3. 给promise挂载几个常见方法 resolve、reject、all、race等等
resolve:返回的是一个指定结果的promise对象
Promise.resolve = function (value) { }
reject:返回失败状态的方法
Promise.reject = function (value) { }
all:返回一个promise对象,只有当promise都返回的时候,这个状态才算成功
Promise.all = function (value) { }
race:返回一个promise对象,它的状态是由第一个返回的对象确定的,这个race里面哪个函数先执行完,就直接返回第一个值,其他的继续执行
Promise.race = function (value) { }
4. 全局声明mypromise
window.Promise = Promise
5. 建立一个自执行函数 将上述内容全部包裹进去
(function (window) {
})()
step2 填充搭建好了的Promise框架
1.填充function Promise()
(1)let self = this固定一个function内部的this,这个this在后面会发挥很大作用
(2)self.status = 'pending'为Promise函数本体添加一个基础状态‘pending'
(3)self.data = undefined建立一个data源,用来存储resolve传回来的结果
(4)self.callbacks = []建立一个数组,用来将promise中的回调全部保存起来
2.填充function resolve()
(1) if (self.status !== 'pending') { return }判断当前传入进程的状态是否为pending,是就继续下面的操作,不是就直接返回
promise内部有三种状态pending、resolved、rejected,这三种状态都是一种开关变量,如果该状态从pending转为其他状态后将无法改变。
(2)self.status = 'resolved'将该进程的状态改为resolved
(3)self.data = value将value存起来,待会then中的回调会需要使用该数据
(4)放上最重要的执行函数部分,如果sele.data中有待执行的callback函数,立即异步执行它
if (self.callbacks.length > 0) {
setTimeout(() => {
self.callbacks.forEach(callbackObj => {
callbackObj.onResolved(value)
})
}, 0)
}
3.填充function reject()
(1) 与resolve函数相同,此处简略
4.填充execotor方法
promise主体在执行时如果出错,错误信息被catch捕捉,此时catch会跳至该函数来单独执行一个reject
try {
execotor(resolve, reject)
} catch (error) {
reject(error)
}
5.填充.then函数
首先我们要区分传入进程的状态,如果是pending状态就把回调函数存起来,如果不是pending状态就干点什么它应该做的
(1)if (self.status === 'pending')如果当前的状态是pending的话,我们就把它保存起来
self.callbacks.push({
onResolved() { onResolved(self.data) },
onRejected() { onRejected(self.data) }
})
(2)else if (self.status === 'resolved')如果status的状态是resolved
我们就开开心心的给它执行一下
setTimeout(() => {
onResolved(self.data)
}, 0)
可是有这么一种状态:resolve没有执行,但此时状态却已经改变了,我们就不能执行resolve而改为执行rejected
else{
setTimeout(() => {
onRejecyed(self.data)
}, 0)
}
经过了如同怎么把大象塞进冰箱一样“简略”的两步,我们就实现了一个简易的Promise
是不是很简单呀,快叫上身边的小伙伴一起来试一试吧!
来源:https://juejin.cn/post/7025623396742332430
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
golang替换无法显示的特殊字符(\\u0000, \\000, ^@)
python利用datetime模块计算程序运行时间问题
python中xlwt模块的具体用法
![](https://img.aspxhome.com/file/2023/4/92324_0s.png)
php插件Xajax使用方法详解
![](https://img.aspxhome.com/file/2023/5/555251_0s.png)
django+mysql的使用示例
![](https://img.aspxhome.com/file/2023/9/67259_0s.png)
如何使用pyinstaller打包多个和单个python文件详解
![](https://img.aspxhome.com/file/2023/6/102936_0s.png)
Python中使用logging和traceback模块记录日志和跟踪异常
![](https://img.aspxhome.com/file/2023/6/86556_0s.png)
python并发场景锁的使用方法
利用Python找出序列中出现最多的元素示例代码
Python实现将Excel转换为json的方法示例
![](https://img.aspxhome.com/file/2023/7/113037_0s.jpg)
JavaScript获取echart曲线上任意点位的值详解
![](https://img.aspxhome.com/file/2023/8/130148_0s.png)
简单瞅瞅Python vars()内置函数的实现
浅析MySQL并行复制
![](https://img.aspxhome.com/file/2023/2/72502_0s.png)
超简单使用Python换脸实例
![](https://img.aspxhome.com/file/2023/3/70853_0s.png)
Python字符串的字符转换、字符串劈分、字符串合并问题分析
![](https://img.aspxhome.com/file/2023/0/72960_0s.png)
MySQL中多个left join on关联条件的顺序说明
![](https://img.aspxhome.com/file/2023/5/100335_0s.png)
如何解决从文本文件中调出记录出现丢失换行的问题?
python 实现多线程下载m3u8格式视频并使用fmmpeg合并
![](https://img.aspxhome.com/file/2023/6/103176_0s.jpg)
Python实现用手机监控远程控制电脑的方法
JS模拟实现哈希表及应用详解
![](https://img.aspxhome.com/file/2023/1/135531_0s.png)