Promise源码实现class版

class封装完整版

(function(window){
    // 进行中状态
    const _PENDING = "pending";
    // 已成功状态
    const _RESOLVED = "resolved";
    // 已失败状态
    const _REJECTED = "rejected";
    class MyPromise {
        constructor(executor) {
            // 设置状态初始值为 pending
            this.status = _PENDING;
            // 设置初始值为 undefined
            this.value = undefined;
            // 添加回调函数队列
            this.onCallBacks = [];

            // 成功时执行
            function _resolve(value) {
                if (this.status !== "pending")
                    return;

                // 修改 MyPromise 对象的状态为 resolve
                this.status = _RESOLVED;
                // 保存成功的数据
                this.value = value;
                //检查回调数组中是否存在数据
                if (this.onCallBacks.length > 0) {
                    // 异步执行
                    setTimeout(() => {
                        this.onCallBacks.forEach(onCb => {
                            onCb.onResolved.call(this);
                        });
                    });
                }
            }

            // 失败时执行
            function _reject(reason) {
                if (this.status !== "pending")
                    return;
                // 修改 MyPromise 对象的状态为 resolve
                this.status = _REJECTED;
                // 保存失败的数据
                this.value = reason;
                //检查回调数组中是否存在数据
                if (this.onCallBacks.length > 0) {
                    // 异步执行
                    setTimeout(() => {
                        this.onCallBacks.forEach(onCb => {
                            onCb.onRejected.call(this);
                        });
                    });
                }
            }

            try {
                // 立即执行 executor
                executor(_resolve.bind(this), _reject.bind(this))
            } catch (err) {
                _reject.call(this, err);
            }
        }

        then(onResolved, onRejected) {
            return new MyPromise((resolve, reject) => {
                /*
                * 参数 cb 的值为 onResolved 或 onRejected 函数
                *  */
                function _callback(cb) {
                    // 增加try方法，如果出现异常，执行reject
                    try {
                        let result = cb(this.value);
                        // 判断返回结果是否为MyPromise类型
                        if (result instanceof MyPromise) {
                            // result 是 MyPromise，下面这行代码是上方代码的简写形式
                            result.then(resolve, reject);
                        } else {
                            // 非MyPromise类型，将结果直接传递过去
                            resolve(result);
                        }
                    } catch (err) {
                        // 出现异常，执行reject
                        reject(err);
                    }
                }

                // 防止使用者不传成功或失败回调函数，所以成功失败回调都给了默认回调函数
                onResolved = typeof onResolved === "function" ? onResolved : value => value;
                onRejected = typeof onRejected === "function" ? onRejected : error => {
                    throw error
                };
                switch (this.status) {
                    // 当状态为resolve时，执行onResolved，并传递结果
                    case _RESOLVED:
                        // 通过 setTimeout 让代码异步执行
                        setTimeout(() => {
                            _callback.call(this, onResolved);
                        });
                        break;
                    // 当状态为reject时，执行onRejected，并传递结果
                    case _REJECTED:
                        // 通过 setTimeout 让代码异步执行
                        setTimeout(() => {
                            _callback.call(this, onRejected);
                        });
                        break;
                    // 当状态为 pending 时，将要执行的回调函数放置到队列中，待状态更改完毕后再调用。
                    case _PENDING:
                        this.onCallBacks.push({
                            onResolved() {
                                //获取回调函数的执行结果
                                _callback.call(this, onResolved);
                            },
                            onRejected() {
                                _callback.call(this, onRejected);
                            }
                        });
                        break;
                }
            })
        }

        catch = function (onRejected) {
            return this.then(undefined, onRejected);
        }
        // 函数对象 resolve 的封装
        static resolve(value) {
            return new MyPromise((resolve, reject) => {
                if (value instanceof MyPromise) {
                    value.then(resolve, reject);
                } else {
                    resolve(value);
                }
            });
        }
        // 函数对象 reject 的封装
        static reject(reason) {
            return new MyPromise((resolve, reject) => {
                reject(reason);
            })
        }
        //函数对象 all 的封装
        static all(MyPromises) {
            return new MyPromise((resolve, reject) => {
                let pValues = [];
                let flag = 0;
                for (let i = 0; i < MyPromises.length; i++) {
                    MyPromises[i].then(v => {
                        pValues[i] = v;
                        flag++;
                        if (flag >= MyPromises.length) {
                            resolve(pValues);
                        }
                    }, r => {
                        reject(r);
                    })
                }
            });
        }
        //函数对象 race
        static race(MyPromises) {
            return new MyPromise((resolve, reject) => {
                for (let i = 0; i < MyPromises.length; i++) {
                    MyPromises[i].then(value => {
                        resolve(value);
                    }, reason => {
                        reject(reason);
                    })
                }
            });
        }
    }
    window.MyPromise = MyPromise;
})(window)

—————END—————
喜欢本文的朋友们，欢迎关注公众号 张培跃，收看更多精彩内容！！