2024年最全Promise源码解密-异步版(1)，2024前端大厂面试经验分享

最后

在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

• HTML5新特性，语义化

• 浏览器的标准模式和怪异模式

• xhtml和html的区别

• 使用data-的好处

• meta标签

• canvas

• HTML废弃的标签

• IE6 bug，和一些定位写法

• css js放置位置和原因

• 什么是渐进式渲染

• html模板语言

• meta viewport原理

• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

3. Promise源码解密-异步版

4. Promise源码解密-then的链式调用

5. Promise源码解密-catch/resolve/reject/race

创作不易 拒绝白嫖 点个赞呗

关注专栏 Promise源码解密,带你走进Promise的深处！！！

---

解决了啥

在同步版本中，我们在执行器中编写异步代码的情况下，

会导致先执行then，在执行异步的方法中的resolve或者reject。

所以我们就需要将then中接收到的方法转移到执行器中的异步方法中执行。

我们只需要将then接收到的方法，展示存起来，当调用到resolve/reject时，再执行then接收到的方法

代码

// 定义状态常量

const STATUS_PENDING = ‘pending’

const STATUS_FULFILLED = ‘fulfilled’

const STATUS_REJECTED = ‘rejected’

class MyPromise {

// 接收一个 执行器

// new Promise的时候，执行器立即执行，

// 执行的时候根据指定函数执行

// 并且程序报错的情况下

constructor(executor) {

this.status = STATUS_PENDING

this.value = undefined

this.reason = undefined

this.onFulfilledCallBacks = []

this.onRejectCallBacks = []

try {

executor(this.resolve, this.reject)

} catch (error) {

// 报错的话直接将错误原因作为reason

this.reject(error)

}

}

// 这里为啥使用箭头函数而不是resolve(){}

// 这是因为上面的executor调用的时候，resolve中的this其实是undefined

// executor单独调用了resolve/reject 这时，这两个方法存在于执行是的环境，this不再指向实例

// 箭头函数内部的this总是指向定义时所在的对象

resolve = (value) => {

// 判断状态是不是

if (this.status === STATUS_PENDING) {

console.log(‘执行resolve’)

// 这里接收传进来的结果

this.value = value

this.status = STATUS_FULFILLED

// 如果有存放起来的then接收的函数，立即遍历执行，这样保证then方法还是最后调用

this.onFulfilledCallBacks.forEach((fn) => {

fn()

})

}

}

reject = (reason) => {

if (this.status === STATUS_PENDING) {

console.log(‘执行reject’)

// 这里接收传进来的错误的结果

this.reason = reason

this.status = STATUS_REJECTED

this.onRejectCallBacks.forEach(fn => {

fn()

})

}

}

then(onFulfilled, onReject) {

console.log('执行then时的状态: ', this.status)

if (this.status === STATUS_FULFILLED) {

console.log(“执行 onFulfilled”)

onFulfilled(this.value)

}

TCP协议

• TCP 和 UDP 的区别？
• TCP 三次握手的过程？
• 为什么是三次而不是两次、四次？
• 三次握手过程中可以携带数据么？
• 说说 TCP 四次挥手的过程
• 为什么是四次挥手而不是三次？
• 半连接队列和 SYN Flood 攻击的关系
• 如何应对 SYN Flood 攻击？
• 介绍一下 TCP 报文头部的字段
• TCP 快速打开的原理(TFO)
• 说说TCP报文中时间戳的作用？
• TCP 的超时重传时间是如何计算的？
• TCP 的流量控制
• TCP 的拥塞控制
• 说说 Nagle 算法和延迟确认？
• 如何理解 TCP 的 keep-alive？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

浏览器篇

• 浏览器缓存?
• 说一说浏览器的本地存储？各自优劣如何？
• 说一说从输入URL到页面呈现发生了什么？
• 谈谈你对重绘和回流的理解
• XSS攻击
• CSRF攻击
• HTTPS为什么让数据传输更安全？
• 实现事件的防抖和节流？
• 实现图片懒加载？

https://bbs.csdn.net/topics/618166371)**

浏览器篇

• 浏览器缓存?
• 说一说浏览器的本地存储？各自优劣如何？
• 说一说从输入URL到页面呈现发生了什么？
• 谈谈你对重绘和回流的理解
• XSS攻击
• CSRF攻击
• HTTPS为什么让数据传输更安全？
• 实现事件的防抖和节流？
• 实现图片懒加载？

[外链图片转存中…(img-iUoGTmRH-1715040676668)]