Promise实现及原理

前言

　　本文主要用自己语言表达出Promise 的基本实现及原理

基本实现

　　先看一个简单的 promise 用法

new Promise((resolve, reject) => {
    console.log(1)

    setTimeout(() => {
        console.log(2)
        resolve()
    }, 2000)

}).then(() => {

    console.log(3)

})

//打印
// 1

// 2
// 3

　　1：运行该代码后，打印出 1 2 3，说明 Promise 构造传进去的函数是由 Promise 调用的，then 里的函数也是由 Promise 调用的，并且两者是有先后关系的，先调用了 Promise 构造里的方法，再调用 then 里的方法。

　　2：把上面代码第 6 行代码注释掉或删掉，代码最终运行打印为 1 2，then 里的方法并没有运行，说明 构造的回调参数 resolve 与 reject 是保证在Promise中同步运行的关键，主动调用了 resolve 后，才调用了 then 里的方法。

　　　　由此，可以大概得出下面代码：

function MyPromise(fn){
    this.fns = null

    fn(this._resolve.bind(this), this._reject.bind(this))
}
MyPromise.prototype = {
    constructor: MyPromise,

    then: function(thenfn) {
        this.fns = thenfn
    },

    _resolve: function() {
        if (this.fns) this.fns()
    },

    _reject: function() {

    }
}

new MyPromise((resolve, reject) => {
    console.log(1)
    setTimeout(() => {
        console.log(2)
        resolve()
    }, 2000)
}).then(() => {
    console.log(3)
})

　　运行上面代码，同样可以打印出 1 2 3，主要原理是运行 Promise 构造里的回调后，将 then 方法的回调运行的主动权交出去了（ _resolve ），而 then 方法的回调已经暂存在 MyPromise 里了(then 方法的职责就是将回调暂存在一个变量里)，这样就能保证在 Promise 里的异步执行完成后才执行 then 的回调。

　　

 

改造

• 问题1

　　then 只能调用一次，每次调用，then 的回调都会被覆盖：

function MyPromise(fn){
    this.fns = []

    fn(this._resolve.bind(this), this._reject.bind(this))
}
MyPromise.prototype = {
    constructor: MyPromise,

    then: function(thenfn) {
        this.fns.push(thenfn)
    },

    _resolve: function() {
        this.fns.forEach(v => v())
    },

    _reject: function() {

    }
}

let a = new MyPromise((resolve, reject) => {
    console.log(1)
    setTimeout(() => {
        console.log(2)
        resolve()
    }, 2000)
})
a.then(() => {
    console.log(3)
})
a.then(() => {
    console.log(4)
})

　　解决方法其实就是使用数组把 then 回调暂存起来，使之能够暂存多个 then 的回调。执行时再遍历执行 then 回调。

 

• 问题2

　　如果 Promise 里的回调执行的不是异步，而是同步的话，then 无法被执行。

new MyPromise((resolve, reject) => {
    console.log(1)
    resolve()
}).then(() => {
    console.log(3)
})

　　如上代码，只打印了 1，其根本原因在于执行 resolve 的时候，then 的回调还没有被添加到 fns 里：

function MyPromise(fn){
    this.fns = []
    this.state = 'pending'


    fn(this._resolve.bind(this), this._reject.bind(this))
}
MyPromise.prototype = {
    constructor: MyPromise,

    then: function(thenfn) {
        if (this.state == 'pending') {
            this.fns.push(thenfn)
        } else {
            thenfn()
        }
        
    },

    _resolve: function() {
        this.state = 'fulfilled'
        this.fns.forEach(v => v())
    },

    _reject: function() {

    }
}

new MyPromise((resolve, reject) => {
    console.log(1)
    resolve()
}).then(() => {
    console.log(3)
})

　　执行上面代码，就能正确打印出 1 3 了，增加一个状态，初始为 pending ，执行 resolve 时，将状态改变为 fulfilled ，而在 then 添加回调到 fns 时，判断当前状态是否是 pending，不是 pending ，说明构造的回调已经执行完了，则直接执行 then 的回调，而不是添加到 fns 等待执行。

 

• 问题3

　　缺少参数传递，要能够在执行异步后将结果传递给 then 的回调，使之能够根据结果进行下一步操作：

function MyPromise(fn){
    this.fns = []
    this.state = 'pending'
    this.value = null

    fn(this._resolve.bind(this), this._reject.bind(this))
}
MyPromise.prototype = {
    constructor: MyPromise,

    then: function(thenfn) {
        if (this.state == 'pending') {
            this.fns.push(thenfn)
        } else {
            thenfn(this.value)
        }
        
    },

    _resolve: function(value) {
        this.state = 'fulfilled'
        this.value = value
        this.fns.forEach(v => v(value))
    },

    _reject: function() {

    }
}

let a = new MyPromise((resolve, reject) => {
    console.log(1)
    resolve('传递数据')
})

a.then((msg) => {
    console.log(msg, 2)
})
a.then((msg) => {
    console.log(msg, 3)
})

　　resolve 接收数据，而在执行 resolve 时，直接将数据传递给 then 的回调。

 

• 问题4

　　如果有多个 then ，then 的回调接收的数据都是一样的：

let a = new MyPromise((resolve, reject) => {
    console.log(1)
    resolve('传递数据')
})

a.then((msg) => {
    console.log(msg, 2)
})
a.then((msg) => {
    console.log(msg, 3)
})

　　以上代码运行后，打印 1 传递数据 2 传递数据 3 ，回调接收的数据都是一样。如果 new 两个不同的 Promise 呢：

let a = new MyPromise((resolve, reject) => {
    console.log(1)
    resolve('传递数据a')
})

let b = new MyPromise((resolve, reject) => {
    console.log(1)
    resolve('传递数据b')
})

a.then((msg) => {
    console.log(msg)
})
b.then((msg) => {
    console.log(msg)
})

　　如上，虽然 a 和 b 的 then 的回调接收的数据不一样了，但两者没有衔接起来，需要 b 能够接收到 a 的数据，从而根据 a 的数据做出其他操作，并且如果 a 和 b 都执行的是异步的话，两者的顺序不能保证。

function MyPromise(fn){
    this.fns = []
    this.state = 'pending'
    this.value = null

    fn(this._resolve.bind(this), this._reject.bind(this))
}
MyPromise.prototype = {
    constructor: MyPromise,

    then: function(thenfn) {
        return new MyPromise ((resolve, reject) => {

            this._handle({
                onFulfilled: thenfn,
                resolve: resolve
            })

        })
    },

    _handle: function(callback) {
        if (this.state == 'pending') {
            this.fns.push(callback)
            return
        }
        
        if (!callback.onFulfilled) {
            callback.resolve(this.value)
            return
        }

        let res = callback.onFulfilled(this.value)
        callback.resolve(res)

    },

    _resolve: function(value) {
        this.state = 'fulfilled'
        this.value = value
        this.fns.forEach(v => this._handle(v))
    },

    _reject: function() {

    }
}

new MyPromise((resolve, reject) => {
    resolve(1)
}).then((msg) => {
    console.log(msg)
    return ++msg
}).then((msg) => {
    console.log(msg)

  56     msg++

  57     console.log(msg)

})

　　运行上面代码，打印 1 2 3，第一个 then 回调接收到数据后进行 + 1，然后传递给 第二个 then 的回调，使第二个 then 的回调能够根据第一个 then 的回调结果进行操作。

　　其主要在于 then 返回了一个新的 Promise，使每次 then 都是一个新的 Promise 对象，而每个新的 Promise 对象中也只暂存了一个 then 的回调，每个新的 Promise 对象里的 value 也保存着各自执行 resolve 传递的数据。

　　在上面 33，34 行中，将 then 的回调执行的结果传递给下一个 Promise 对象的 resolve，才能够使多个 then 进行衔接。

　　虽然在 then 中 new 了新的 Promise 对象，但在执行 _handle 时，其 this 是上一个 Promise 对象的，而其中 callback.onFulfilled 和 callback.resolve 是 then 中的( 是下一个Promise对象的 )，这也是多个 then 能够衔接的关键。

 

• 问题5

　　如果 then 的回调返回的也是 Promise 的类型呢

new MyPromise((resolve, reject) => {
    resolve(1)
}).then((msg) => {
    console.log(msg)
    return new MyPromise((resolve, reject) => {
        resolve(2)
    })
}).then((msg) => {
    console.log(msg)
})

　　如上，打印结果为 1 和 MyPromise ，并没有如期打印出 1 和 2。这里很好解决，既然返回的是 Promise ，那么我们主动调用它的 then 即可，其实也类似 多个 then 的链式调用。

_resolve: function(value) {
        
        if(value && (typeof value === 'object' && value instanceof MyPromise)) {
            if (typeof value.then === 'function') {
                value.then.call(value, this._resolve.bind(this), this._reject.bind(this))
                return
            }
        }

        this.state = 'fulfilled'
        this.value = value
        this.fns.forEach(v => this._handle(v))
    }

　　这里只修改了 _resolve，判断返回的是否是 MyPromise，是则主动调用 MyPromise 的 then。

　　then 中返回 Promise ，而在 _resolve 中主动调用 Promise 的 then，其原理跟调用时的多个 .then 一样，只不过返回 Promise 的是在里层主动调用罢了。

 

• 添加 reject 处理

function MyPromise(fn){
    this.fns = []
    this.state = 'pending'
    this.value = null

    fn(this._resolve.bind(this), this._reject.bind(this))
}
MyPromise.prototype = {
    constructor: MyPromise,

    then: function(onFulfilled, onRejected) {
        return new MyPromise ((resolve, reject) => {

            this._handle({
                onFulfilled: onFulfilled,
                onRejected: onRejected,
                resolve: resolve,
                reject: reject
            })

        })
    },

    _handle: function(callback) {

        if (this.state == 'pending') {
            this.fns.push(callback)
            return
        }

        let cb = this.state == 'fulfilled' ? callback.onFulfilled : callback.onRejected
        
        if (!cb) {
            cb = this.state == 'fulfilled' ? callback.resolve : callback.reject
            cb(this.value)
            return
        }


        let res = cb(this.value)
        cb = this.state == 'fulfilled' ? callback.resolve : callback.reject
        cb(res)

    },

    _resolve: function(value) {

        if(value && (typeof value === 'object' && value instanceof MyPromise)) {
            if (typeof value.then === 'function') {
                value.then.call(value, this._resolve.bind(this), this._reject.bind(this))
                return
            }
        }

        this.state = 'fulfilled'
        this.value = value
        this.fns.forEach(v => this._handle(v))
    },

    _reject: function(err) {

        this.state = 'rejected'
        this.value = err
        this.fns.forEach(v => this._handle(v))

    }
}

　　添加一个 reject ，无非再增加一种状态，然后再在 _handle 中增加状态的判断，以运行 resolve 或者 reject。

 

• 添加 catch

_handle: function(callback) {

        if (this.state == 'pending') {
            this.fns.push(callback)
            return
        }

        let cb = this.state == 'fulfilled' ? callback.onFulfilled : callback.onRejected
        
        if (!cb) {
            cb = this.state == 'fulfilled' ? callback.resolve : callback.reject
            cb(this.value)
            return
        }

        let res
        try{
            res = cb(this.value)
            cb = this.state == 'fulfilled' ? callback.resolve : callback.reject
        } catch(err) {
            res = err
            cb = callback.reject
        } finally {
            cb(res)
        }
        

    }

catch: function(err) {
        return this.then(null, err)
    }

　　添加 catch 则在运行回调时进行 try/catch 的捕获，以执行 resolve 或 reject，而 catch 方法其实就是执行一个 失败的 then，所以直接返回 then(null, err)

　　

 完整代码

function MyPromise(fn){
    this.fns = []
    this.state = 'pending'
    this.value = null

    fn(this._resolve.bind(this), this._reject.bind(this))
}
MyPromise.prototype = {
    constructor: MyPromise,

    then: function(onFulfilled, onRejected) {
        return new MyPromise ((resolve, reject) => {

            this._handle({
                onFulfilled: onFulfilled,
                onRejected: onRejected,
                resolve: resolve,
                reject: reject
            })

        })
    },

    catch: function(err) {
        return this.then(null, err)
    },

    _handle: function(callback) {

        if (this.state == 'pending') {
            this.fns.push(callback)
            return
        }

        let cb = this.state == 'fulfilled' ? callback.onFulfilled : callback.onRejected
        
        if (!cb) {
            cb = this.state == 'fulfilled' ? callback.resolve : callback.reject
            cb(this.value)
            return
        }

        let res
        try{
            res = cb(this.value)
            cb = this.state == 'fulfilled' ? callback.resolve : callback.reject
        } catch(err) {
            res = err
            cb = callback.reject
        } finally {
            cb(res)
        }
        

    },

    _resolve: function(value) {

        if(value && (typeof value === 'object' && value instanceof MyPromise)) {
            if (typeof value.then === 'function') {
                value.then.call(value, this._resolve.bind(this), this._reject.bind(this))
                return
            }
        }

        this.state = 'fulfilled'
        this.value = value
        this.fns.forEach(v => this._handle(v))
    },

    _reject: function(err) {

        this.state = 'rejected'
        this.value = err
        this.fns.forEach(v => this._handle(v))

    }
}

 

参考

　　图解 Promise 实现原理（一）—— 基础实现 - 知乎 (zhihu.com)