一、剖析Promise的基础框架

要实现Promise原理，肯定得先明白其原理。Promsie的基础框架如下：

// 挂在原型上的方法，实例对象可以访问并且使用
MyPromise.prototype.then = function(onResolved, onRejected) {//.then接收两个函数类型的形参，分别处理Promise为成功和失败状态时的情况
}
MyPromise.prototype.catch = function(onRejected) {//.catch接收一个函数类型的形参，相当于.then的第二个回调函数
}
//...还有一些其他方法
function MyPromise(executor) {// Promise的初始状态为pendinglet self = this;this.status = 'pending'//executor包含两个函数类型的形参，即resolve和rejectfunction resolve() {}
​function reject() {}
​//其他具体操作
} 

二、实现Promsie中两个类型为函数的形参

我们首先要明白的是：

1、Promise的三种状态

（1）pending（待处理）：Promise的初始状态 （2）fufilled（处理成功）：Promise执行完resolve回调后的状态 （3）rejected（处理失败）：Promise执行完reject回调后的状态 当Promise状态为pending状态的时候，为同步代码，如果后面接.then，不会执行它的回调函数； 当状态为resolved和rejected的时候，为异步代码，可用定时器模拟实现。

2、Promise的两个类型为函数的形参

（1）resolve：调用resolve函数，Promise状态变为成功

（2）reject：调用reject函数，Promise状态变为失败

有了以上的知识基础，是不是就更好下手了。

(function(window) {function MyPromise(executor) {let self = this //保存this对象self.status = 'pending' //初始状态为pendingself.data = undefinedself.callbacks = []
​// 实现resolvefunction resolve(value) {//必须是pending状态,Promsie的状态只会被改变一次if (self.status !== 'pending') {return}// 将状态变为fullfilledself.status = 'fullfilled'self.data = value
​//有没有待执行的回调函数if (self.callbacks.length > 0) {//如果有，必须都执行
                setTimeout(() => {//定时器模拟异步
                    self.callbacks.forEach(callbackObj => {
                            callbackObj.onResolved(value)
                  })})}}
​function reject(value) {// 同样也必须是pending状态if (self.status !== 'pending') {return}// 将状态变为rejectedself.status = 'rejected'self.data = value
​// 有没有待执行的回调if (self.callbacks.length > 0) {//如果有，必须都执行
                setTimeout(() => {//定时器模拟异步self.callbacks.forEach(callbackObj => {callbackObj.onRejected(value)//失败的回调})})}}
        
        try {executor(resolve, reject)} catch (error) {reject(error)}}window.MyPromise = MyPromise
})(window) 

简单概括，实现resolve和reject步骤，

（1）判断状态是否为‘pending’，必须是’pending’状态，因为Promise的状态只会改变一次，如果执行resolve和reject的时候，状态不是’pending’状态，那么它的状态是不会再被改变的。如果状态仍然为Promsie的初始状态’pending’，则进行下一步操作；否则，如果不是，直接跳过，不需要任何返回值。

（2）如果是’pending’状态，将状态改变为成功或者失败状态，同时将数据包裹传递，让.then或者.catch执行的时候，可以得到返回值；

（3）判断是否还有未执行的回调函数，一般是指.then或者.catch里面的还未执行的回调函数，如果有的话，必须都执行，同时他都是异步代码，使用定时器模拟异步效果。

（4）最后，使用*try{}catch(){}*模块，try里面执行这个Promise的异步函数，如果有异常，统一按照rejected状态处理错误。

三、实现.then

（1）then接收两个函数类型的参数，第一个是Promise成功情况的回调，第二个是失败情况的回调；当Promise状态为成功时执行第一个回调函数，当Promsie状态为失败时执行第二个回调函数。

（2）Promise的.then是微任务

（3）Promise的.then可以链式调用

（4）.then返回的是一个Promise对象

.then是Promise原型上的，所以可以将它挂载原型上实现：

MyPromise.prototype.then = function(onResolved, onRejected) {// 把回调用对象包裹，存放在callbacks中let self = thisreturn new MyPromise((resolve, reject) => {if (self.status === 'pending') { //状态还未改变，.then有两个回调函数self.callbacks.push({onResolved,onRejected})} else if (self.status === 'fullfilled') { //状态为成功，执行onResolved//定时器模拟.then的异步执行setTimeout(() => {const result = onResolved(self.data)if (result instanceof MyPromise) { //返回值是Promise对象result.then( //为了将result的状态变更成resolved(res) => {resolve(res)},(err) => {reject(err)})return result} else { //返回值不是Promise对象resolve(result)}})} else { //状态为成功，执行onRejectedsetTimeout(() => {onRejected(self.data)})}})
} 

实现.then最大的难点就是它的链式调用，如果返回值是一个Promise对象，就执行.then里面的操作；但是如果返回值不是Promsie对象，那就直接调用Promise的resolve函数。另外，还需要明确this的指向，这里this指向的不是新生成的Pomise对象，这点比较重要。

四、实现.catch

（1）.catch回调相当于.then的第二个回调，可以捕获reject出来的错误或者直接在Promsie内部throw new Error()出来的错误。它的实现相对比较简单，如果状态为rejected，我们就执行onRejected函数，同时也需要使用定时器模拟异步。

MyPromise.prototype.catch = function(onRejected) {let self = thisif (self.status == 'pending') {self.callbacks.push({onRejected})} else if (self.status == 'rejected') {setTimeout(() => {onRejected(self.data)})}
} 

除了.then和.catch方法是挂载在Promise原型上的回调函数，还有Promise.prototype.finally()；另外Promise.all()，Promise.race()。。。不是原型上的方法。感兴趣的可以尝试写出他们的实现原理。

五、测试

1、resolve

Promsie内部没有任何其他return情况，测试如下：

let promise = new MyPromise((resolve, reject) => {resolve('成功啦~')
}).then(res => {console.log(res); //成功啦~
}) 

2、reject

测试reject，结果如下：

let promise = new MyPromise((resolve, reject) => {reject('失败啦~')
}).then(res => {console.log(res);
}, err => {console.log(err);//失败啦~
}) 

3、.then

测试.then，结果如下

let MyPromiseTest = new MyPromise((resolve, reject) => {resolve('成功啦');}).then(res => {console.log(res);
​}).then(res => {console.log('猜猜我打印什么');})
//成功啦
//猜猜我打印什么 

4、.catch

let promise = new MyPromise((resolve, reject) => {reject('失败啦')
}).catch(err => {console.log(err);//失败啦
}) 

以上实现原理只能在浏览器执行成功，因为node端没有window对象；如果想在node端实现Promie原理，最推荐和优雅的方式就是使用ES6里面的class（类），使用类的话，原型上的方法就写在constructor里面，而其他方法不是原型上的，是类的静态方法，就不能被类的实例对象继承，需要使用关键字static表示，其余的逻辑都一样的哦~。

最后

整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。

有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享

部分文档展示：

文章篇幅有限，后面的内容就不一一展示了

有需要的小伙伴，可以点下方卡片免费领取