Zerlinda's Blog

Promise/A+实现及原理学习笔记

前言

Promise标准

Promise 规范有很多,如Promise/A,Promise/B,Promise/D 以及 Promise/A 的升级版 Promise/A+。ES6 中采用了 Promise/A+ 规范。

英文版规范: Promises/A+规范

中文版规范: Promises/A+规范(中文)

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() {}

本文的promise源码是按照Promise/A+规范来编写的。只简单分析及实现then机制。完整代码请直接戳这里跳转

“表情包暴漫”的图片搜索结果

原理

Promise的语法

new Promise(

    /* executor */

    function(resolve, reject) {…}

);

executor是一个带有resolve和reject两个参数的函数 。executor 函数在Promise的创建时就立即执行。而异步任务一旦完成,就调用resolve函数来解决promise,并将异步操作的结果,作为参数传递出去。反之操作失败,就调用reject函数,并同样将异步操作报出的错误,作为参数传递出去。注意的是,在executor函数运行时抛出任何一个错误,都会导致promise状态变为rejected,这也意味着异步操作失败。

更常见的是下面这种形式:

new Promise(
  /* executor */
 function(resolve, reject) {
   // ... some code
   if (/* 异步操作成功 */){
     resolve(value);
   } else {
     reject(error);
   }
 }
);

在上面的代码形式中,通过if…else…来区分异步操作成功与否仅仅是为了形象理解Promise,实际代码中,resolve和reject是完全由我们自己决定出现的形式和位置,换言之,我们可以自己定义操作成功和操作失败的条件,从而为之绑定对应的处理函数。

实现

目标一

new Promise((resolve) => {
    resolve(1);
}).then((a) => console.log('data', a));

目标二

var promise = new Promise((resolve) => {
    resolve(1);
});
promise.then((a) => console.log('data', a));

目标三

var promise = new Promise((resolve) => {
    setTimeout(()=> {
        resolve(1);
    }, 3000);
});
promise.then((a) => {
    console.log('data', a);
    return {
        then: function(resolve, reject) {
            resolve(11);
        }
    }
}).then(a => {console.log(a)});

原理剖析

我们现在只考虑executor只有resolve一个方法的情况,rejected则同理可得。

“表情包暴漫”的图片搜索结果

目标一

new Promise((resolve) => {
    resolve(1);
}).then((a) => console.log('data', a));

简单的实现

function Promise(executor) {
    var value = null,
        callbacks = [];  //callbacks为数组,因为可能同时有很多个回调

    this.then = function (onFulfilled) {
        callbacks.push(onFulfilled);
    };

    function resolve(value) {
        setTimeout(()=> {
            callbacks.forEach(function (callback) {
                callback(value);
            });
        });
    }

    executor(resolve);
}

以上可以满足目标一的要求了。代码具体的如何传参肉眼可见就不做赘述,简单说一下。

value记录的是promise的执行结果,作为参数,被传递给then方法的回调函数resolve,而then方法的回调统一存储在callbacks数组中,这两个变量都是通过闭包来保存。

上述代码大致的逻辑:

首先明白:then方法的作用实际上是注册回调函数,resolve方法一旦真正被执行,说明此时异步操作已经结束并有了返回结果。

在创建Promise实例的时候立即执行executor方法,当resolve被执行,此时异步操作已经返回结果,callbacks数组中的回调函数也立即被执行。

同时通过上面的代码也可以理解,Promise实例一经创建便立即执行匿名函数;

PS: resolve方法为什么要加定时器?因为resolve的value可能是同步执行的结果;then方法是在实例化Promise之后才调用的,then方法用于注册回调,callbacks此时为空,所以将resolve方法放在Event Loop的最后。在执行resolve方法时回调已经注册。

“表情包”的图片搜索结果

但是接下来会发现,目标二貌似行不通。仔细看就会发现,只要then方法注册回调的时机晚于resolve方法,以上就会失效。

“表情包”的图片搜索结果

加入状态

目标二

var promise = new Promise((resolve) => {
    resolve(1);
});
promise.then((a) => console.log('data', a));

为了解决上面抛出的问题,我们必须加入状态机制,也就是大家熟知的pending、fulfilled、rejected。

Promises/A+规范中的2.1Promise States中明确规定了,pending可以转化为fulfilled或rejected并且只能转化一次,也就是说如果pending转化到fulfilled状态,那么就不能再转化到rejected。并且fulfilled和rejected状态只能由pending转化而来,两者之间不能互相转换:

既然目标二的then方法在执行时状态已经变为fulfilled,value已经是异步操作的结果,那么此时立即执行传入的回调函数不就好了吗?

“表情包”的图片搜索结果

改进后的代码是这样的:

function Promise(executor) {
    var state = 'pending',
        value = null,
        callbacks = [];

    this.then = function (onFulfilled) {
        if (state === 'pending') {
            callbacks.push(onFulfilled);
            return this;
        }
        onFulfilled(value);
    };

    function resolve(newValue) {
        value = newValue;
        state = 'fulfilled';
        setTimeout(function () {
            callbacks.forEach(function (callback) {
                callback(value);
            });
        }, 0);
    }

    executor(resolve);
}

上述代码的思路是这样的:resolve执行时,会将状态设置为fulfilled,在此之后调用then添加的新回调,都会立即执行。

 

“表情包”的图片搜索结果

所以现在已经满足目标二了。接下来发现,目标三又行不通了。

链式Promise

目标三

var promise = new Promise((resolve) => {
    setTimeout(()=> {
        resolve(1);
    }, 3000);
});
promise.then((a) => {
    console.log('data', a);
    return {
        then: function(resolve, reject) {
            resolve(11);
        }
    }
}).then(a => {console.log(a)});

链式Promise是指在当前promise达到fulfilled状态后,即开始进行下一个promise(后邻promise)。那么我们如何衔接当前promise和后邻promise呢?

只要在then方法里面return一个promise就好。

改造代码:

function Promise(executor) {
    var state = 'pending',
        value = null,
        callbacks = [];
    function resolvePromise(promise2, x, resolve) {
        if (promise2 === x) {
            new TypeError('循环引用');
        }
        let then = x&& x.then;
        if (then && typeof then === 'function') {
            then.call(x, y => {
                resolvePromise(promise2, y, resolve);
            })
        } else {
            resolve(x);
        }
    }
    this.then = function (onFulfilled) {
        let newPromise;
        if (state === 'fulfilled') {
            return newPromise = new Promise((resolve) => {
                setTimeout(() => {
                    let x = onFulfilled(value);
                    let then = x.then;
                    if (typeof then === 'function') {
                        then.call(x, y => {
                            resolvePromise(newPromise, y, resolve);
                        })
                    } else { // 说明是一个普通对象/函数
                        resolve(x);
                    }
                });
            })
        }
        if (state === 'pending') {
            return newPromise = new Promise((resolve) => {
                callbacks.push((value) => {
                    let x = onFulfilled(value);
                    resolvePromise(newPromise, x, resolve);
                });
            });
        }
    };
    function resolve(newValue) {
        value = newValue;
        state = 'fulfilled';
        setTimeout(function () {
            callbacks.forEach(function (callback) {
                callback(value);
            });
        }, 0);
    }
    executor(resolve);
}

then方法中,创建并返回了新的Promise实例,这是串行Promise的基础,并且支持链式调用。 resolvePromise方法是promise内部的方法。用来递归处理then方法的返回值,如果返回是thenable类型,将一直递归直到返回是普通类型。

异常处理

细心的会想到:如果在执行成功回调、失败回调时代码出错怎么办?对于这类异常,可以使用try-catch捕获错误,并将bridge promise设为rejected状态。这里不做赘述,可以具体查看完整代码。

“表情包”的图片搜索结果

总结

现在回顾下Promise的实现过程,其主要使用了设计模式中的观察者模式:

  1. 通过Promise.prototype.then方法将观察者方法注册到被观察者Promise对象中,同时返回一个新的Promise对象,以便可以链式调用。
  2. 被观察者管理内部pending、fulfilled和rejected的状态转变,同时通过构造函数中传递的resolve和reject方法以主动触发状态转变和通知观察者。

“表情包”的图片搜索结果

附完整代码:

/**
 * Promise 实现 遵循promise/A+规范
 * Promise/A+规范译文:
 * https://malcolmyu.github.io/2015/06/12/Promises-A-Plus/#note-4
 */

// promise 三个状态
const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";

function Promise(excutor) {
    let that = this; // 缓存当前promise实例对象
    that.status = PENDING; // 初始状态
    that.value = undefined; // fulfilled状态时 返回的信息
    that.reason = undefined; // rejected状态时 拒绝的原因
    that.onFulfilledCallbacks = []; // 存储fulfilled状态对应的onFulfilled函数
    that.onRejectedCallbacks = []; // 存储rejected状态对应的onRejected函数

    function resolve(value) { // value成功态时接收的终值
        if(value instanceof Promise) {
            return value.then(resolve, reject);
        }

        // 为什么resolve 加setTimeout?
        // 2.2.4规范 onFulfilled 和 onRejected 只允许在 execution context 栈仅包含平台代码时运行.
        // 注1 这里的平台代码指的是引擎、环境以及 promise 的实施代码。实践中要确保 onFulfilled 和 onRejected 方法异步执行,且应该在 then 方法被调用的那一轮事件循环之后的新执行栈中执行。

        setTimeout(() => {
            // 调用resolve 回调对应onFulfilled函数
            if (that.status === PENDING) {
                // 只能由pedning状态 => fulfilled状态 (避免调用多次resolve reject)
                that.status = FULFILLED;
                that.value = value;
                that.onFulfilledCallbacks.forEach(cb => cb(that.value));
            }
        });
    }

    function reject(reason) { // reason失败态时接收的拒因
        setTimeout(() => {
            // 调用reject 回调对应onRejected函数
            if (that.status === PENDING) {
                // 只能由pedning状态 => rejected状态 (避免调用多次resolve reject)
                that.status = REJECTED;
                that.reason = reason;
                that.onRejectedCallbacks.forEach(cb => cb(that.reason));
            }
        });
    }

    // 捕获在excutor执行器中抛出的异常
    // new Promise((resolve, reject) => {
    //     throw new Error('error in excutor')
    // })
    try {
        excutor(resolve, reject);
    } catch (e) {
        reject(e);
    }
}

/**
 * resolve中的值几种情况:
 * 1.普通值
 * 2.promise对象
 * 3.thenable对象/函数
 */

/**
 * 对resolve 进行改造增强 针对resolve中不同值情况 进行处理
 * @param  {promise} promise2 promise1.then方法返回的新的promise对象
 * @param  {[type]} x         promise1中onFulfilled的返回值
 * @param  {[type]} resolve   promise2的resolve方法
 * @param  {[type]} reject    promise2的reject方法
 */
function resolvePromise(promise2, x, resolve, reject) {
    if (promise2 === x) {  // 如果从onFulfilled中返回的x 就是promise2 就会导致循环引用报错
        return reject(new TypeError('循环引用'));
    }

    let called = false; // 避免多次调用
    // 如果x是一个promise对象 (该判断和下面 判断是不是thenable对象重复 所以可有可无)
    if (x instanceof Promise) { // 获得它的终值 继续resolve
        if (x.status === PENDING) { // 如果为等待态需等待直至 x 被执行或拒绝 并解析y值
            x.then(y => {
                resolvePromise(promise2, y, resolve, reject);
            }, reason => {
                reject(reason);
            });
        } else { // 如果 x 已经处于执行态/拒绝态(值已经被解析为普通值),用相同的值执行传递下去 promise
            x.then(resolve, reject);
        }
        // 如果 x 为对象或者函数
    } else if (x != null && ((typeof x === 'object') || (typeof x === 'function'))) {
        try { // 是否是thenable对象(具有then方法的对象/函数)
            let then = x.then;
            if (typeof then === 'function') {
                then.call(x, y => {
                    if(called) return;
                    called = true;
                    resolvePromise(promise2, y, resolve, reject);
                }, reason => {
                    if(called) return;
                    called = true;
                    reject(reason);
                })
            } else { // 说明是一个普通对象/函数
                resolve(x);
            }
        } catch(e) {
            if(called) return;
            called = true;
            reject(e);
        }
    } else {
        resolve(x);
    }
}

/**
 * [注册fulfilled状态/rejected状态对应的回调函数]
 * @param  {function} onFulfilled fulfilled状态时 执行的函数
 * @param  {function} onRejected  rejected状态时 执行的函数
 * @return {function} newPromsie  返回一个新的promise对象
 */
Promise.prototype.then = function(onFulfilled, onRejected) {
    const that = this;
    let newPromise;
    // 处理参数默认值 保证参数后续能够继续执行
    onFulfilled =
        typeof onFulfilled === "function" ? onFulfilled : value => value;
    onRejected =
        typeof onRejected === "function" ? onRejected : reason => {
            throw reason;
        };

    // then里面的FULFILLED/REJECTED状态时 为什么要加setTimeout ?
    // 原因:
    // 其一 2.2.4规范 要确保 onFulfilled 和 onRejected 方法异步执行(且应该在 then 方法被调用的那一轮事件循环之后的新执行栈中执行) 所以要在resolve里加上setTimeout
    // 其二 2.2.6规范 对于一个promise,它的then方法可以调用多次.(当在其他程序中多次调用同一个promise的then时 由于之前状态已经为FULFILLED/REJECTED状态,则会走的下面逻辑),所以要确保为FULFILLED/REJECTED状态后 也要异步执行onFulfilled/onRejected

    // 其二 2.2.6规范 也是resolve函数里加setTimeout的原因
    // 总之都是 让then方法异步执行 也就是确保onFulfilled/onRejected异步执行

    // 如下面这种情景 多次调用p1.then
    // p1.then((value) => { // 此时p1.status 由pedding状态 => fulfilled状态
    //     console.log(value); // resolve
    //     // console.log(p1.status); // fulfilled
    //     p1.then(value => { // 再次p1.then 这时已经为fulfilled状态 走的是fulfilled状态判断里的逻辑 所以我们也要确保判断里面onFuilled异步执行
    //         console.log(value); // 'resolve'
    //     });
    //     console.log('当前执行栈中同步代码');
    // })
    // console.log('全局执行栈中同步代码');
    //

    if (that.status === FULFILLED) { // 成功态
        return newPromise = new Promise((resolve, reject) => {
            setTimeout(() => {
                try{
                    let x = onFulfilled(that.value);
                    // resolvePromise(newPromise, x, resolve, reject); // 新的promise resolve 上一个onFulfilled的返回值
                    try { // 是否是thenable对象(具有then方法的对象/函数)
                        let then = x.then;
                        if (typeof then === 'function') {
                            then.call(x, y => {
                                if(called) return;
                                called = true;
                                resolvePromise(newPromise, y, resolve, reject);
                            }, reason => {
                                if(called) return;
                                called = true;
                                reject(reason);
                            })
                        } else { // 说明是一个普通对象/函数
                            resolve(x);
                        }
                    } catch(e) {
                        if(called) return;
                        called = true;
                        reject(e);
                    }
                } catch(e) {
                    reject(e); // 捕获前面onFulfilled中抛出的异常 then(onFulfilled, onRejected);
                }
            });
        })
    }

    if (that.status === REJECTED) { // 失败态
        return newPromise = new Promise((resolve, reject) => {
            setTimeout(() => {
                try {
                    let x = onRejected(that.reason);
                    resolvePromise(newPromise, x, resolve, reject);
                } catch(e) {
                    reject(e);
                }
            });
        });
    }

    if (that.status === PENDING) { // 等待态
        // 当异步调用resolve/rejected时 将onFulfilled/onRejected收集暂存到集合中
        return newPromise = new Promise((resolve, reject) => {
            that.onFulfilledCallbacks.push((value) => {
                try {
                    let x = onFulfilled(value);
                    resolvePromise(newPromise, x, resolve, reject);
                } catch(e) {
                    reject(e);
                }
            });
            that.onRejectedCallbacks.push((reason) => {
                try {
                    let x = onRejected(reason);
                    resolvePromise(newPromise, x, resolve, reject);
                } catch(e) {
                    reject(e);
                }
            });
        });
    }
};

/**
 * Promise.all Promise进行并行处理
 * 参数: promise对象组成的数组作为参数
 * 返回值: 返回一个Promise实例
 * 当这个数组里的所有promise对象全部变为resolve状态的时候,才会resolve。
 */
Promise.all = function(promises) {
    return new Promise((resolve, reject) => {
        let done = gen(promises.length, resolve);
        promises.forEach((promise, index) => {
            promise.then((value) => {
                done(index, value)
            }, reject)
        })
    })
}

function gen(length, resolve) {
    let count = 0;
    let values = [];
    return function(i, value) {
        values[i] = value;
        if (++count === length) {
            console.log(values);
            resolve(values);
        }
    }
}

/**
 * Promise.race
 * 参数: 接收 promise对象组成的数组作为参数
 * 返回值: 返回一个Promise实例
 * 只要有一个promise对象进入 FulFilled 或者 Rejected 状态的话,就会继续进行后面的处理(取决于哪一个更快)
 */
Promise.race = function(promises) {
    return new Promise((resolve, reject) => {
        promises.forEach((promise, index) => {
            promise.then(resolve, reject);
        });
    });
}

// 用于promise方法链时 捕获前面onFulfilled/onRejected抛出的异常
Promise.prototype.catch = function(onRejected) {
    return this.then(null, onRejected);
}

Promise.resolve = function (value) {
    return new Promise(resolve => {
        resolve(value);
    });
}

Promise.reject = function (reason) {
    return new Promise((resolve, reject) => {
        reject(reason);
    });
}

/**
 * 基于Promise实现Deferred的
 * Deferred和Promise的关系
 * - Deferred 拥有 Promise
 * - Deferred 具备对 Promise的状态进行操作的特权方法(resolve reject)
 *
 *参考jQuery.Deferred
 *url: http://api.jquery.com/category/deferred-object/
 */
Promise.deferred = function() { // 延迟对象
    let defer = {};
    defer.promise = new Promise((resolve, reject) => {
        defer.resolve = resolve;
        defer.reject = reject;
    });
    return defer;
}

/**
 * Promise/A+规范测试
 * npm i -g promises-aplus-tests
 * promises-aplus-tests Promise.js
 */

try {
    module.exports = Promise
} catch (e) {

}

发表评论

电子邮件地址不会被公开。 必填项已用*标注