创作不易 拒绝白嫖 点个赞呗
关注专栏 Promise源码解密,带你走进Promise的深处!!!
1. Promise
promise 是一个拥有 then
方法的 object 或 function ,其行为符合本规范
2. thenable
是一个定义了 then
方法的 object 或 function
3. 值(value)
指任何 JavaScript 的合法值(包括 undefined
, thenable 和 promise);
4. 异常(exception)
通过throw抛出一个值
5. 原因(reason)
一个promise被拒绝的原因
class Promise {
constructor(executor) {
this.value = undefined;
this.reason = undefined;
}
}
function Promise(){}
Promise.prototype.then=function(){}
1. Promise 的状态
当前Promise的状态只能是下面三种状态中的一种,不能存在多种状态。
示例:
const STATUS_PENDING = “pending”;
const STATUS_FULFILLED = “fulfilled”;
const STATUS_REJECTED = “rejected”;
class Promise {
constructor(executor) {
this.status = STATUS_PENDING;
}
}
1.1. 等待(Pending)
处于等待时,状态可以迁移至执行态或拒绝态
1.2. 执行(Fulfilled)
处于执行时:
-
不能迁移至其他任何状态
-
必须拥有一个不可变的终值
1.3. 拒绝(Rejected)
处于拒绝时:
-
不能迁移至其他任何状态
-
必须拥有一个不可变的reason
这里的不可变指的是恒等(即可用 ===
判断相等),引用数据类型只要保证地址相等即可。
new Promise((resolve, reject) => {
resolve(‘成功’);
reject(‘拒绝’)
}).then((res) => {
console.log(res,“res”)
}, (error) => {
console.log(error,‘reason’)
})
new Promise()时状态是pending,
当程序执行,也就是(resolve, reject) => {
resolve(‘成功’);
reject(‘拒绝’)
},这个执行
这里resolve把值进行了this.value = “成功”;,但是并不会this.reason=‘拒绝’,
这是因为只有出现了执行就不会出现拒绝,最后输出的结果是"成功 res",
如果注释掉resolve(‘成功’);,最后输出的结果是 “拒绝 reason”。
2. Then 方法
一个 promise 必须提供一个 then
方法以访问其当前值、终值 和 reason。
promise 的 then
方法接受两个函数参数:
promise.then(onFulfilled, onRejected)
then((res) => {
console.log(res,“res”)
}, (error) => {
console.log(error,‘reason’)
})
2.1 onFulfilled
和 onRejected
都是可选参数。
-
如果
onFulfilled
不是函数,必须被忽略 -
如果
onRejected
不是函数,必须被忽略
2.2 onFulfilled
如果 onFulfilled
是函数:
-
当
promise
执行结束后其必须被调用,其第一个参数为promise
的value -
在
promise
执行结束前其不可被调用 -
其调用次数不可超过一次
new Promise((resolve, reject) => {
resolve(123)
}).then(result => {
console.log(result);
}, error => {
console.log(error);
});
// 这里resolve执行结束才会执行then,这里的result就是终值
2.3 onRejected
如果 onRejected
是函数:
-
当
promise
被拒绝执行后其必须被调用,其第一个参数为promise
的reason -
在
promise
被拒绝执行前其不可被调用 -
其调用次数不可超过一次
2.4 调用时机
onFulfilled
和 onRejected
只有在执行环境堆栈仅包含平台代码时才可被调用 >> 注1
2.5 调用要求
onFulfilled
和 onRejected
必须被作为函数调用(即没有 this
值)>> 注2
2.6 多次调用
then方法可以被同一个
promise 调用多次
-
当
promise
成功执行时,所有onFulfilled
需按照其注册顺序依次回调 -
当
promise
被拒绝执行时,所有的onRejected
需按照其注册顺序依次回调
new Promise.then().then()
2.7 返回
then
方法必须返回一个 promise
对象 >> 注3, 这也就是then可以被多次调用的原因。
Promise.prototype.then=function(onFulfilled, onRejected){
return new Promise()
}
promise2 = promise1.then(onFulfilled, onRejected);
- 如果
onFulfilled
或者onRejected
返回一个值x
,则运行下面的 Promise 解决过程:[[Resolve]](promise2, x)
promise1.then((value)=>{
return x;
}, (reason)=>{
return x
}),
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且后续会持续更新
如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
文末
js前端的重头戏,值得花大部分时间学习。
推荐通过书籍学习,《 JavaScript 高级程序设计(第 4 版)》你值得拥有。整本书内容质量都很高,尤其是前十章语言基础部分,建议多读几遍。
另外,大推一个网上教程 现代 JavaScript 教程 ,文章深入浅出,很容易理解,上面的内容几乎都是重点,而且充分发挥了网上教程的时效性和资料链接。
学习资料在精不在多,二者结合,定能构建你的 JavaScript 知识体系。
面试本质也是考试,面试题就起到很好的考纲作用。想要取得优秀的面试成绩,刷面试题是必须的,除非你样样精通。
这是288页的前端面试题
一个人可以走的很快,但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎扫码加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
67767.png)
另外,大推一个网上教程 现代 JavaScript 教程 ,文章深入浅出,很容易理解,上面的内容几乎都是重点,而且充分发挥了网上教程的时效性和资料链接。
学习资料在精不在多,二者结合,定能构建你的 JavaScript 知识体系。
面试本质也是考试,面试题就起到很好的考纲作用。想要取得优秀的面试成绩,刷面试题是必须的,除非你样样精通。
这是288页的前端面试题
一个人可以走的很快,但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎扫码加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
[外链图片转存中…(img-WVUSw6Lu-1712496941496)]