手写Promise方法（实现Promise A+规范）

手写Promise

---

Promise 构造函数

我们先来写 Promise 的构造函数。需要处理的值如下：

1. Promise 状态记录：this.state
2. 记录成功或失败的值：this.value和this.reason
3. 收集解决和拒绝回调函数：this.resolveCallbacks和this.rejectCallbacks
4. 执行首次传入的解决和拒绝回调函数：func(this.resolve, this.reject)

class myPromise {
   
    constructor(func) {
   
        this.state = 'pending' // Promise状态
        this.value = undefined // 成功的值
        this.reason = undefined // 失败的值
        this.resolveCallbacks = [] // 收集解决回调函数
        this.rejectCallbacks = [] // 收集拒绝回调函数
        try {
    // 对传入的函数进行try...catch...做容错处理
            func(this.resolve, this.reject) // 执行首次传入的两个回调函数
        } catch (e) {
   
            this.reject(e)
        }
    }
}

---

三个状态（pending、rejected和fulfilled）

pending：待定状态。待定Promise。只有在then方法执行后才会保持此状态。

fulfilled：解决状态。终止Promise。只有在resolve方法执行后才会由pending更改为此状态。

rejected：拒绝状态。终止Promise。只有在reject方法执行后才会由pending更改为此状态。

注意：其中只有pedding状态可以变更为rejected或fulfilled。rejected或fulfilled不能更改其他任何状态。

---

三个方法（resolve、reject和then）

resolve方法实现要点

1. 状态由pending为fulfilled。
2. resolve方法传入的value参数赋值给this.value
3. 按顺序执行resolveCallbacks里面所有解决回调函数
4. 利用call方法将解决回调函数内部的this绑定为undefined

坑点 1：resolve方法内部this指向会丢失，进而造成this.value丢失。

解决办法：我们将resolve方法定义为箭头函数。在构造函数执行后，箭头函数可以绑定实例对象的this指向。

// 2.1. Promise 状态
resolve = (value) => {
    // 在执行构造函数时内部的this通过箭头函数绑定实例对象
    if (this.state === 'pending') {
   
        this.state = 'fulfilled' // 第一点
        this.value = value // 第二点
        while (this.resolveCallbacks.length > 0) {
    // 第三点
            this.resolveCallbacks.shift().call(undefined) // 第四点
        }
    }
}

reject方法实现要点

1. 状态由pending为rejected
2. reject方法传入的reason参数赋值给this.reason
3. 按顺序执行rejectCallbacks里面所有拒绝回调函数
4. 利用call方法将拒绝回调函数内部的this绑定为undefined

坑点 1： reject 方法内部this指向会丢失，进而造成this.reason丢失。

解决办法：我们将reject方法定义为箭头函数。在构造函数执行后，箭头函数可以绑定实例对象的this指向。

// 2.1. Promise 状态
reject = (reason) => {
    // 在执行构造函数时内部的this通过箭头函数绑定实例对象
    if (this.state === 'pending') {
   
        this.state = 'rejected' // 第一点
        this.reason = reason // 第二点
        while (this.rejectCallbacks.length > 0) {
     // 第三点
            this.rejectCallbacks.shift().call(undefined) // 第四点
        }
    }
}

then方法实现要点

1. 判断then方法的两个参数onRejected和onFulfilled是否为function。

   1.1 onRejected和onFulfilled都是function，继续执行下一步。

   1.2 onRejected不是function，将onRejected赋值为箭头函数，参数为reason执行throw reason

   1.3 onFulfilled不是function，将onFulfilled赋值为箭头函数，参数为value执行return value

2. 当前Promise状态为rejected：

   2.1 onRejected方法传入this.reason参数，异步执行。

   2.2 对执行的onRejected方法做容错处理，catch错误作为reject方法参数执行。

3. 当前Promise状态为fulfilled：

   3.1 onFulfilled方法传入this.value参数，异步执行。

   3.2 对执行的onFulfilled方法做容错处理，catch错误作为reject方法参数执行。

4. 当前Promise状态为pending：

   4.1 收集onFulfilled和onRejected两个回调函数分别push给resolveCallbacks和rejectCallbacks。

   4.2 收集的回调函数同样如上所述，先做异步执行再做容错处理。

5. 返回一个 Promise 实例对象。

// 2.2. then 方法
then(onFulfilled, onRejected) {
   
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value // 第一点 
    onRejected = typeof onRejected === 'function' ? onRejected : reason => {
    throw reason } // 第一点 
    const p2 = new myPromise((resolve, reject) => {
   
        if (this.state === 'rejected') {
    // 第二点
            queueMicrotask(() => {
   
                try {
   
                    onRejected(this.reason)
                } catch (e) {
   
                    reject