手写Promise源码

Promise类核心逻辑实现

/*
    1. Promise就是一个类，在执行这个类的时候，需要传递一个执行器进去，执行器会立即执行
    2. Promise中有三种状态：成功fulfilled、失败rejected、等待pending
        pending -> fulfilled
        pending -> rejected
        一旦状态确定就不可更改
    3. resolve和reject函数是用来更改状态的
        resolve：fulfilled
        reject：rejected
    4. then方法内部做的事情就是判断状态，如果状态是成功就调用成功回调函数，如果状态是失败就调用失败回调函数。then方法是被定义在原型对象中的
    5. then成功回调有一个参数，表示成功之后的值；失败回调有一个参数，表示失败后的原因
*/

const MyPromise = require('./MyPromise')

let promise = new MyPromise((resolve, reject) => {
    resolve('成功')
    reject('失败')
})

promise.then(value => {
    console.log(value)
}, reason => {
    console.log(reason)
})

// MyPromise.js
const PENDING = 'pending'  // 等待
const FULFILLED = 'fulfilled'  // 成功
const REJECTED = 'rejected'  // 失败


class MyPromise {
    constructor(executor) {
        // 执行器立即执行，因此在此处调用传入的执行器函数
        executor(this.resolve, this.reject)
    }
    // Promise状态
    status = PENDING
    // 成功之后的值
    value = undefined
    // 失败之后的原因
    reason = undefined

    resolve = value => {
        // 如果状态不是等待，阻止程序向下执行
        if (this.status !== PENDING) return
        // 将状态更改为成功
        this.status = FULFILLED
        // 保存成功之后的值
        this.value = value
    }

    reject = reason => {
        // 如果状态不是等待，阻止程序向下执行
        if (this.status !== PENDING) return
        // 将状态更改为失败
        this.status = REJECTED
        // 保存失败后的原因
        this.reason = reason
    }

    then(successCallback, failCallback) {
        // 判断状态
        if (this.status === FULFILLED) {
            successCallback(this.value)
        } else if (this.status === REJECTED) {
            failCallback(this.reason)
        }
    }
}

module.exports = MyPromise

在Promise类中加入异步逻辑

如果有异步情况，那么需要在.then()方法中加入对PENDING状态的判断，由于resolve/reject还未执行，需要先将回调函数存储起来，等到resolve/reject执行的时候调用。

// 如果执行器函数中是异步
let promise = new MyPromise((resolve, reject) => {
    setTimeout(() => {
        resolve('成功')
    }, 1000);
})

class MyPromise {
    // ...
    // 成功回调函数
    successCallback = undefined
    // 失败回调函数
    failCallback = undefined

    resolve = value => {
        // ...
        // 判断成功回调是否存在，如果存在则调用
        this.successCallback && this.successCallback(this.value)
    }

    reject = reason => {
        // ...
        // 判断失败回调是否存在，如果存在则调用
        this.failCallback && this.failCallback(this.reason)
    }

    then(successCallback, failCallback) {
        // 判断状态
        if (this.status === FULFILLED) {
            successCallback(this.value)
        } else if (this.status === REJECTED) {
            failCallback(this.reason)
        } else {
            // 等待
            // 将成功回调和失败回调存储起来
            this.successCallback = successCallback
            this.failCallback = failCallback
        }
    }
}

实现then方法多次调用添加多个处理函数

如果.then()方法被多次调用，那么需要存储多个处理函数，因此将MyPromise类中的successCallback和failCallback改成数组。

// 如果then被多次调用
promise.then(value => {
    console.log(value)
}, reason => {
    console.log(reason)
})

promise.then(value => {
    console.log(value)
}, reason => {
    console.log(reason)
})

promise.then(value => {
    console.log(value)
}, reason => {
    console.log(reason)
})

class MyPromise {
    // ...
    // 成功回调函数
    successCallback = []
    // 失败回调函数
    failCallback = []

    resolve = value => {
        // ...
        // 判断成功回调是否存在，如果存在则调用
        // this.successCallback && this.successCallback(this.value)
        while (this.successCallback.length !== 0) this.successCallback.shift()(this.value)
    }

    reject = reason => {
        // ...
        // 判断失败回调是否存在，如果存在则调用
        // this.failCallback && this.failCallback(this.reason)
        while (this.failCallback.length !== 0) this.failCallback.shift()(this.reason)
    }

    then(successCallback, failCallback) {
        // 判断状态
        if (this.status === FULFILLED) {
            successCallback(this.value)
        } else if (this.status === REJECTED) {
            failCallback(this.reason)
        } else {
            // 等待
            // 将成功回调和失败回调存储起来
            this.successCallback.push(successCallback)
            this.failCallback.push(failCallback)
        }
    }
}

module.exports = MyPromise

实现then方法的链式调用

要实现.then()方法的链式调用，那么它返回的必须是Promise对象，因此需要改写then方法，创建一个新的Promise对象，然后通过resolve将本次结果传递给下次调用。

// then方法的链式调用
function other() {
    return new MyPromise((resolve, reject) => {
        resolve('other')
    })
}
promise.then(value => {
    console.log(value)
    return other()
}).then(value => {
    console.log(value)
})

class MyPromise {
    // ...
    then(successCallback, failCallback) {
        let promise2 = new MyPromise((resolve, reject) => {
            // 判断状态
            if (this.status === FULFILLED) {
                let x = successCallback(this.value)
                // 判断x的值是普通值还是Promise对象
                // 如果是普通值，直接调用resolve
                // 如果是Promise对象，查看Promise对象返回的结果
                // 再根据Promise对象返回的结果决定调用resolve还是reject
                resolvePromise(x, resolve, reject)
            } 
            // ...
        })
        return promise2
    }
}

function resolvePromise(x, resolve, reject) {
    if (x instanceof MyPromise) {
        // Promise对象
        // x.then(value => resolve(value), reason => reject(reason))
        x.then(resolve, reject)
    } else {
        // 普通值
        resolve(x)
    }
}

then方法链式调用识别Promise对象自返回

let p1 = promise.then(value => {
    console.log(value)
    return p1
})

p1.then(value => {
    console.log(value)
}, reason => {
    console.log(reason)
})

class MyPromise {
    // ...
    then(successCallback, failCallback) {
        let promise2 = new MyPromise((resolve, reject) => {
            // 判断状态
            if (this.status === FULFILLED) {
                // 为了能够取到promise2，将此段代码改成异步
                setTimeout(() => {
                    let x = successCallback(this.value)
                    // 判断x的值是普通值还是Promise对象
                    // 如果是普通值，直接调用resolve
                    // 如果是Promise对象，查看Promise对象返回的结果
                    // 再根据Promise对象返回的结果决定调用resolve还是reject
                    resolvePromise(promise2, x, resolve, reject)
                }, 0);
            } 
            // ...
        })
        return promise2
    }
}

function resolvePromise(promise2, x, resolve, reject) {
    // 如果当前Promise对象自返回，则报错
    if (promise2 === x) {
        return reject(new TypeError('Chaining cycle detected for promise #'))
    }
    // ...
}

捕获错误及then链式调用其他状态代码补充

1.执行器中的错误捕获；
2.then的回调函数报错，要在下一个then方法中捕获到。

// 错误捕获
let promise = new Promise((resolve, reject) => {
    // 第一个
    throw new Error('executor error')
    resolve('成功')
})

promise.then(value => {
    // 第二个
    throw new Error('then error')
    console.log(value)
}, reason => {
    console.log(reason)
}).then(value => {
    console.log(value)
}, reason => {
    console.log('第二个回调函数捕获错误')
    console.log(reason.message);
})

class MyPromise {
    constructor(executor) {
        try {
            // 执行器立即执行，因此在此处调用传入的执行器函数
            executor(this.resolve, this.reject)
        } catch (e) {
            this.reject(e)
        }
    }
    // ...

    resolve = value => {
        // ...
        while (this.successCallback.length !== 0) this.successCallback.shift()()
    }

    reject = reason => {
        // ...
        while (this.failCallback.length !== 0) this.failCallback.shift()()
    }

    then(successCallback, failCallback) {
        let promise2 = new MyPromise((resolve, reject) => {
            // 判断状态
            if (this.status === FULFILLED) {
                // 为了能够取到promise2，将此段代码改成异步
                setTimeout(() => {
                    try {
                        let x = successCallback(this.value)
                        // 判断x的值是普通值还是Promise对象
                        // 如果是普通值，直接调用resolve
                        // 如果是Promise对象，查看Promise对象返回的结果
                        // 再根据Promise对象返回的结果决定调用resolve还是reject
                        resolvePromise(promise2, x, resolve, reject)
                    } catch (e) {
                        reject(e)
                    }
                }, 0)
            } else if (this.status === REJECTED) {
                setTimeout(() => {
                    try {
                        let x = failCallback(this.reason)
                        resolvePromise(promise2, x, resolve, reject)
                    } catch (e) {
                        reject(e)
                    }
                }, 0)
            } else {
                // 等待
                // 将成功回调和失败回调存储起来
                this.successCallback.push(() => {
                    setTimeout(() => {
                        try {
                            let x = successCallback(this.value)
                            resolvePromise(promise2, x, resolve, reject)
                        } catch (e) {
                            reject(e)
                        }
                    }, 0)
                })
                this.failCallback.push(() => {
                    setTimeout(() => {
                        try {
                            let x = failCallback(this.reason)
                            resolvePromise(promise2, x, resolve, reject)
                        } catch (e) {
                            reject(e)
                        }
                    }, 0)
                })
            }
        })
        return promise2
    }
}

将then方法的参数变成可选参数

// then方法不传参
promise.then().then().then(value => {
    console.log(value)
}, reason => {
    console.log(reason)
})

then(successCallback, failCallback) {
    // then方法可以不传参，因此需要先判断
    successCallback = successCallback ? successCallback : value => value
    failCallback = failCallback ? failCallback : reason => { throw reason }  // 使用throw抛出异常
    // ...

Promise.all()方法的实现

static all(array) {
    let result = []
    let index = 0
    return new MyPromise((resolve, reject) => {
        function addData(key, value) {
            result[key] = value
            index++
            // 防止Promise对象中有异步操作返回空值
            if (index === array.length) {
                resolve(result)
            }
        }
        for (let i = 0; i < array.length; i++) {
            let current = array[i]
            if (current instanceof MyPromise) {
                // Promise对象
                current.then(value => addData(i, value), reason => reject(reason))
            } else {
                // 普通值
                addData(i, current)
            }
        }
    })
}

Promise.resolve方法的实现

static resolve(value) {
    if (value instanceof MyPromise) return value
    return new MyPromise(resolve => resolve(value))
}

Promise.finally方法的实现

finally(callback) {
    // 不管是否成功都调用回调函数
    // 调用this.then方法得到当前Promise对象的状态
    // finally方法之后可以链式调用then，因此需要返回Promise对象
    return this.then(value => {
        // 第一种写法
        // callback()
        // return value

        // 第二种写法
        return MyPromise.resolve(callback()).then(() => value)
        // callback函数中可能有异步操作，因此需要等待callback执行完毕再返回value
    }, reason => {
        // callback()
        // throw reason
        return MyPromise.resolve(callback()).then(() => { throw reason })
    })
}

catch方法的实现

catch(failCallback) {
    return this.then(undefined, failCallback)
}