2024年Web前端最全Promise 简单源码，靠着这份面试题跟答案

最后

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了

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

if(true){

resolved(‘成功’);

}else{

rejusted(‘失败’);

}

},1000);

})

promise.then(function(res){

console.log(res)

}).catch(function(errer){

throw new Error(errer)

})

分析Promise方法

---

1. 创建一个构造函数MyPromise

2. 传入一个Fn方法为参数：操作事件的成功或者失败的

3. 创建一个属性记录成功的事件：successList

4. 创建一个属性记录失败的事件：failList

5. 创建一个属性记录状态的绑定state：pending（初始状态）、fullfilled（成功）、rejected（失败）

6. Fn方法有两个参数：resolveFn（成功）和 rejusteFn（失败）

2. resolveFn：遍历成功的任务

2. rejusteFn：遍历失败的任务

3. 在该构造函数的原型上创建then方法和catch方法

3. then方法：参数resolveFn（成功）和 rejusteFn（失败）

3. catch方法：rejusteFn失败方法

回到顶部 目录

Promise源码

---

class MyPromise {

constructor(Fn) {

// 存放成功的微任务

this.successList = [];

// 存放失败的微任务

this.failList = [];

// 记录Promise执行状态

this.state = ‘pending’;

// Promise的参数

Fn(this.resolveFn.bind(this), this.rejusteFn.bind(this));

}

// then方法

then(resolveFn, rejusteFn){

if(typeof resolveFn === ‘function’){

this.successList.push(resolveFn);

}

if(typeof rejusteFn === ‘function’){

this.failList.push(rejusteFn);

}

return this;

}

// catch方法

catch(rejusteFn){

if(typeof rejusteFn === ‘function’){

this.failList.push(rejusteFn);

}

return this;

}

// 循环执行成功微任务

resolveFn(res){

// 改变状态

this.state = ‘fullfilled’;

this.successList.forEach(item => item(res));

最后

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

《前端开发四大模块核心知识笔记》

最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

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

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。

人得到了学习和成长。

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

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。