2024年前端最新Promise源码解密-异步版(2)，达内前端开发视频

性能优化

1.webpack打包文件体积过大？（最终打包为一个js文件）

2.如何优化webpack构建的性能

3.移动端的性能优化

4.Vue的SPA 如何优化加载速度

5.移动端300ms延迟

6.页面的重构

所有的知识点都有详细的解答，我整理成了280页PDF《前端校招面试真题精编解析》。

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

// 定义状态常量

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)

}

if (this.status === STATUS_REJECTED) {

console.log(“执行 onReject”)

onReject(this.reason)

}

// 如果状态是pending的话，暂时存放起来。

// 在异步情况下，回先执行then，所以状态是pending

if (this.status === STATUS_PENDING) {

this.onFulfilledCallBacks.push(() => onFulfilled(this.value))

this.onRejectCallBacks.push(() => onReject(this.reason))

}

}

}

let t = new MyPromise((resolve, reject) => {

// 指定执行哪个，resolve和reject最终只会执行一个

// console.log(a) // 执行console会报错，最终只会执行reject

// // resolve(“res”)

// reject(‘reject’)

setTimeout(() => {

resolve(‘异步执行结束’)

}, 1000)

})

最后

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

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

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

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

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

[外链图片转存中…(img-gOVN1ose-1715010723648)]