Promise 简单源码

}else{

rejusted(‘失败’);

}

},1000);

})

promise.then(function(res){

console.log(res)

}).catch(function(errer){

throw new Error(errer)

})

[](()分析Promise方法

---------------------------------- 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 ----------------------------------------

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));

}

// 循环执行失败微任务