Promise 原理解析

实现一个简单的Promise

• 整体结构:

• 思路是最关键的

表面上看起来:Promise最基础的功能就是在resolve之后执行实例原型上的then中传入的方法

一般情况下,我们是这样使用Promise的

const a = new Promise(#1 (resolve) => {
    setTimeout(() => {
        #2 resolve(123);
    }, 1000);
});
#3 a.then(#4 (v) => {
    console.log(v); //////123
});

我们可以把then函数理解成是一个函数收集器,先将你预先想执行的函数在promise内部注册,在resolve或reject之后再逐个调用

执行顺序: #1->#3->#2->#4

但是也存在这样一种情况,Promise传入函数不是异步函数,比如

const a = new Promise(#1 (resolve) => {
#2 resolve(123);
});
#3 a.then(#4 (v) => {
    console.log(v); //////123
});

立即执行#1之后马上就resolve了

执行顺序: #1->#2->#3->#4

那么按照之前说的,then收集将要执行的函数,resolve时再调用,现在resolve在then之前就执行了,那还怎么正常执行#4

解决办法

先不管具体逻辑部分,用setTimeout方法将真正要执行的部分包裹一下,押入setTimeout队列，等待普通的任务队列中的任务执行完才开始按顺序执行积累在setTimeout中的任务,所以这样封装之后顺序又回到了原来的状态

执行顺序: #1->#3->#2->#4

• 状态

promise内部的状态我把它分为三种情况“pending”,“resolved”,“rejected”

在初始化Promise时初始状态是“pending”,然后在执行then收集函数的时候,通过状态来判断执行的操作

如果是pending,将函数押栈,否则直接执行传进来的函数

• 链式调用

promise的精髓和弊端都是链式调用,链式的实现方式很简单,再返回一个新实例即可

• 传入参数是Promise的情况

在执行时判断一下即可,如果是返回的是Promise,则调用Promise.then方法,将外部的resolve作为then方法的第一个参数,这样即可递归至所有返回结果不为promise为止

实现了基本的promise后就可以编写一些api函数了

• promise.all

arg.callee.prototype.all = function (entries) {
    return new arg.callee(function (resolve, reject) {
        var resolvedCounter = [];
        for (var i = 0; i < entries.length; i++) {
            (function (cur) {
                arg.callee.resolve(entries[i]).then((v) => {
                    resolvedCounter[i] = v;
                    if (resolvedCounter.length === entries.length) {
                        return resolve(resolvedCounter);
                    }
                }, function (reason) {
                    return reject(reason);
                });
            })(i);
        }
    });
};

• promise.race

arg.callee.race = function (entries) {
    return new arg.callee(function (resolve, reject) {
        for (var i = 0; i < entries.length; i++) {
            arg.callee.resolve(entries[i]).then((v) => {
                return resolve(v);
            }, function (reason) {
                return reject(reason);
            });
        }
    });
};

function MyPromise(fn) {
    this.status = 'pending';
    this.value = null;
    this.reason = null;
    var self = this;
    var resDeferreds = [];
    var rejDeferreds = [];
    var arg = arguments;
    var resolve = function (val) {
        if (self.status !== 'pending') {
            return;
        }
        setTimeout(function () {
            self.value = val;
            self.status = "resolved";
            resDeferreds.forEach(function (deferred) {
                deferred(self.value);
            });
        }, 0);
    };
    var reject = function (val) {
        if (self.status !== 'pending') {
            return;
        }
        setTimeout(function () {
            self.reason = val;
            self.status = "rejected";
            rejDeferreds.forEach(function (deferred) {
                deferred(self.reason);
            });
        }, 0);
    };
    arg.callee.prototype.then = function (resolved, rejected) {
        resolved = typeof resolved === 'function' ? resolved : function (v) {
            return v;
        };
        rejected = typeof rejected === 'function' ? rejected : function (r) {
            throw r;
        };
        return new arg.callee(function (resolve, reject) {    //返回一个新的promise
            function resHandle(value) {  //成功
                setTimeout(function () {
                    var ret = resolved(self.value);
                    if (ret instanceof arg.callee) {    //判断 then中的 返回的是否是promise对象，如果是注册then方法
                        ret.then(resolve, reject);
                    } else {
                        resolve(ret);
                    }
                });
            }

            function rejHandle(reason) {  //失败
                setTimeout(function () {
                    var ret = rejected(self.value);
                    if (ret instanceof arg.callee) {    //判断 then中的 返回的是否是promise对象，如果是注册then方法
                        ret.then(resolve, reject);
                    } else {
                        reject(ret);
                    }
                });

            }

            if (self.status === 'pending') {
                resDeferreds.push(resHandle);
                rejDeferreds.push(rejHandle);
            }
            if (self.status === 'resolved') {
                resHandle(self.value);
            }
            if (self.status === 'rejected') {
                rejHandle(self.reason);
            }
        });
    };
    arg.callee.resolve = function (value) {
        return new arg.callee(function (res, rej) {
            if (value instanceof arg.callee) {
                value.then(res, rej);
            } else {
                resolve(value);
            }
        });
    };
    arg.callee.all = function (entries) {
        return new arg.callee(function (resolve, reject) {
            var resolvedCounter = [];
            for (var i = 0; i < entries.length; i++) {
                (function (cur) {
                    arg.callee.resolve(entries[i]).then((v) => {
                        resolvedCounter[i] = v;
                        if (resolvedCounter.length === entries.length) {
                            return resolve(resolvedCounter);
                        }
                    }, function (reason) {
                        return reject(reason);
                    });
                })(i);
            }
        });
    };
    arg.callee.race = function (entries) {
        return new arg.callee(function (resolve, reject) {
            for (var i = 0; i < entries.length; i++) {
                arg.callee.resolve(entries[i]).then((v) => {
                    return resolve(v);
                }, function (reason) {
                    return reject(reason);
                });
            }
        });
    };
    fn(resolve, reject);
};