时间: 2020-08-31|38次围观|0 条评论

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—————
喜欢本文的朋友们,欢迎关注公众号 张培跃,收看更多精彩内容!!

文章转载于:https://www.jianshu.com/p/a30a5ebcc1fc

原著是一个有趣的人,若有侵权,请通知删除

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自起风了,原文地址《Promise源码实现class版
   

还没有人抢沙发呢~