Promise原理与实现

末蓝、 2021-06-26 16:06 348阅读 0赞

## `Promise`标准 ##

1.  `Promise` 规范有很多，如`Promise/A`，`Promise/B`，`Promise/D` 以及 `Promise/A`  
    的升级版 `Promise/A+`。`ES6` 中采用了 `Promise/A+` 规范。 英文版规范:  
    [Promises/A+规范][Promises_A] 中文版规范:  
    [Promises/A+规范(中文)][Promises_A 1]
2.  `Promise`标准解读  
    (1)一个`promise`的当前状态只能是`pending`、`fulfilled`和`rejected`三种之一。状态改变只能是`pending`到`fulfilled`或者`pending`到`rejected`。状态改变不可逆。  
    (2)`promise`的`then`方法接收两个可选参数，表示该`promise`状态改变时的回调(`promise.then(onFulfilled,onRejected)`)。`then`方法返回一个`promise`。`then`方法可以被同一个 `promise` 调用多次。

## 实现`Promise` ##

`Promise`标准仅描述了`then`方法的行为，未对`catch、all、race`方法进行描述，也未规范如何创建一个`Promise`对象。`ES6`中`Promise`提供了以下`API`。  
(1) 构造函数

function Promise(resolver) { }

(2) 原型方法

Promise.prototype.then = function() { }
    Promise.prototype.catch = function() { }

(3) 静态方法

Promise.resolve = function() { }
    Promise.reject = function() { }
    Promise.all = function() { }
    Promise.race = function() { }

## 构造函数 ##

1.  `Promise/A+`标准并没有指定如何构造一个`Promise`对象，我们以`ES6`原生`Promise`模块里通过构造函数创建`Promise`对象的方式实现`Promise`构造函数。`ES6`中通过构造函数创建`Promise`对象的简单用法如下：

const promise = new Promise((resolve) => { 
        setTimeout(()=> { 
            resolve(1);
        }, 2000);
    });
    promise.then(a=> alert(a));
    promise.then(a => alert(a+1));

构造函数用法总结：  
(1) 构造函数接收一个`executor`立即执行函数  
(2) `executor`立即执行函数接收一个`resolve`函数  
(3) `promise`对象的`then`方法绑定状态变为`fulfilled`时的回调  
(4) `resolve`函数被调用时会触发`then`方法中的回调

1.  构造函数的简单实现

1.  `executor`自执行函数接收的第二个参数为`reject`函数且`reject`函数在`promise`对象状态变为`rejected`时或`executor`抛出异常时触发。

总结：①`executor`函数作为实参在创建`Promise`对象时传入`Promise`构造函数。②`resolve`和`reject`函数作为实参传入`executor`函数。③`value`作为实参传入`resolve`和`reject`函数。

如果`executor`自执行函数中的`resolve`函数立即触发时，发现`Promise`失效，例如：

const promise = new Promise((resolve) => { 
        resolve(1);
    });
    promise.then((a) => alert(a));

解决办法：需要将`promise`的`resolve`和`reject`异步执行。

## `then`方法 ##

1.  在构造函数中的示例中，`then`方法并没有返回一个`promise`对象，而 `Promise/A+`  
    规范中规定`then`方法用来注册`promise`对象状态改变时的回调，且返回一个新的`promise`对象。  
    (1) `then`方法返回一个新的`promise`对象。  
    (2) `executor`自执行函数中的`resolve`参数调用时执行`then`方法的第一个回调函数`onResolved`。  
    (3) `executor`自执行函数中的reject参数调用时执行`then`方法的第二个回调函数`onRejected`。

Promise.prototype.then = function (onResolved, onRejected) { 
        var self = this;
        var promise2;
        onResolved = typeof onResolved === 'function' 
                    ? onResolved 
                    : function (value) { return value};
        onRejected = typeof onRejected === 'function' 
                    ? onRejected 
                    : function (reason) { throw reason};
        //promise对象当前状态为resolved
        if(self.status === 'resolved') { 
            return promise2 = new Promise(function (resolve, reject) { 
                try { 
                    //调用onResolve回调函数
                    var x = onResolved(self.data);
                    //如果onResolve回调函数返回值为一个promise对象
                    if(x instanceof  Promise) { 
                        //将它的结果作为promise2的结果
                        x.then(resolve, reject);
                    } else { 
                        resolve(x);//执行promise2的onResolve回调
               }        
                } catch (e) { 
                    reject(e); //执行promise2的onReject回调
                }
            })
        }
        //promise对象当前状态为rejected
        if(self.status === 'rejected') { 
            return promise2 = new Promise(function (resolve, reject) { 
                try { 
                    var x = onRejected(self.data);
                    if (x instanceof Promise) { 
                        x.then(resolve, reject)
                    } else { 
                        resolve(x)
                    }
                } catch (e) { 
                    reject(e)
                }
            })
        }
        //promise对象当前状态为pending
        //此时并不能确定调用onResolved还是onRejected，需要等当前Promise状态确定。
        //所以需要将callBack放入promise1的回调数组中
        if(self.status === 'pending') { 
            return promise2 = new Promise(function (resolve, reject) { 
                self.onResolvedCallback.push(function (value) { 
                    try { 
                        var x = onResolved(self.data);
                        if (x instanceof Promise) { 
                            x.then(resolve, reject);
                        } else { 
                            resolve(x);
              }
                    } catch (e) { 
                        reject(e);
                    }
                })
                self.onRejectedCallback.push(function(reason) { 
                    try { 
                        var x = onRejected(self.data);
                        if (x instanceof Promise) { 
                            x.then(resolve, reject)
                        } else { 
                            resolve(x);
                        }
                    } catch (e) { 
                        reject(e)
                    }
                })
            })
        }
    };

1.  参照`Promise/A+`标准对`promise`进行改写

function resolvePromise(promise2, x, resolve, reject) { 
        var then
        var thenCalledOrThrow = false
    
        if (promise2 === x) { 
            return reject(new TypeError('Chaining cycle detected for promise!'))
        }
        if (x instanceof Promise) { 
            if (x.status === 'pending') {  //because x could resolved by a Promise Object
                x.then(function(v) { 
                    resolvePromise(promise2, v, resolve, reject)
                }, reject)
            } else {  //but if it is resolved, it will never resolved by a Promise Object but a static value;
                x.then(resolve, reject)
            }
            return
        }
    
        if ((x !== null) && ((typeof x === 'object') || (typeof x === 'function'))) { 
            try { 
                then = x.then //because x.then could be a getter
                if (typeof then === 'function') { 
                    then.call(x, function rs(y) { 
                        if (thenCalledOrThrow) return
                        thenCalledOrThrow = true
                        return resolvePromise(promise2, y, resolve, reject)
                    }, function rj(r) { 
                        if (thenCalledOrThrow) return
                        thenCalledOrThrow = true
                        return reject(r)
                    })
                } else { 
                    resolve(x)
                }
            } catch (e) { 
                if (thenCalledOrThrow) return
                thenCalledOrThrow = true
                return reject(e)
            }
        } else { 
            resolve(x)
        }
    }
    
    Promise.prototype.then = function(onResolved, onRejected) { 
        var self = this
        var promise2
        onResolved = typeof onResolved === 'function' ? onResolved : function(v) { 
            return v
        }
        onRejected = typeof onRejected === 'function' ? onRejected : function(r) { 
            throw r
        }
    
        if (self.status === 'resolved') { 
            return promise2 = new Promise(function(resolve, reject) { 
                setTimeout(function() {  // 异步执行onResolved
                    try { 
                        var x = onResolved(self.data)
                        resolvePromise(promise2, x, resolve, reject)
                    } catch (reason) { 
                        reject(reason)
                    }
                })
            })
        }
    
        if (self.status === 'rejected') { 
            return promise2 = new Promise(function(resolve, reject) { 
                setTimeout(function() {  // 异步执行onRejected
                    try { 
                        var x = onRejected(self.data)
                        resolvePromise(promise2, x, resolve, reject)
                    } catch (reason) { 
                        reject(reason)
                    }
                })
            })
        }
    
        if (self.status === 'pending') { 
            // 这里之所以没有异步执行，是因为这些函数必然会被resolve或reject调用，而resolve或reject函数里的内容已是异步执行，构造函数里的定义
            return promise2 = new Promise(function(resolve, reject) { 
                self.onResolvedCallback.push(function(value) { 
                    try { 
                        var x = onResolved(value)
                        resolvePromise(promise2, x, resolve, reject)
                    } catch (r) { 
                        reject(r)
                    }
                })
    
                self.onRejectedCallback.push(function(reason) { 
                    try { 
                        var x = onRejected(reason)
                        resolvePromise(promise2, x, resolve, reject)
                    } catch (r) { 
                        reject(r)
                    }
                })
            })
        }
    }

完整代码

[Promises_A]: https://promisesaplus.com/
[Promises_A 1]: http://link.zhihu.com/?target=http://www.ituring.com.cn/article/66566