使用ES6模拟Promise

谁践踏了优雅 2021-09-20 04:26 406阅读 0赞

const Promise = (() => { 
        const PENDING = "pending",
            RESOLVED = "resolved",
            REJECTED = "rejected",
            PromiveValue = Symbol("PromiseValue"), // 状态数据
            PromiseStatus = Symbol("PromiseStatus"),
            thenables = Symbol("thenables"), //thenable
            catchables = Symbol("catchbles"), //catchables
            changeStatus = Symbol("changeStatus"),// 改变状态
            settleHandle = Symbol("settleHandle"), //后续处理的通用函数
            linkPromise = Symbol("linkPromise");  //创建串联的Promise
    
        return class Promise { 
    
            /** * 改变当前Promise的状态 * @param {*} newStatus * @param {*} newValue * @param {*} queue 执行的作业队列 */
            [changeStatus](newStatus, newValue, queue) { 
                if (this[PromiseStatus] !== PENDING) { 
                    //状态无法变更
                    return;
                }
                this[PromiseStatus] = newStatus;
                this[PromiveValue] = newValue;
                //执行相应队列中的函数
                queue.forEach(handler => handler(newValue));
            }
    
            /** * * @param {*} executor 未决阶段（pending状态）下的处理函数 */
            constructor(executor) { 
                this[PromiseStatus] = PENDING;
                this[PromiveValue] = undefined;
                this[thenables] = []; //后续处理函数的数组 -> resolved
                this[catchables] = []; //后续处理函数的数组 -> rejected
    
                const resolve = data => { 
                    this[changeStatus](RESOLVED, data, this[thenables]);
                }
    
                const reject = reason => { 
                    this[changeStatus](REJECTED, reason, this[catchables]);
                }
                try { 
                    executor(resolve, reject)
                }
                catch (err) { 
                    reject(err);
                }
            }
    
            /** * 处理 后续处理函数 * @param {*} handler 后续处理函数 * @param {*} immediatelyStatus 需要立即执行的状态 * @param {*} queue 作业队列 */
            [settleHandle](handler, immediatelyStatus, queue) { 
                if (typeof handler !== "function") { 
                    return;
                }
                if (this[PromiseStatus] === immediatelyStatus) { 
                    //直接运行
                    setTimeout(() => { 
                        handler(this[PromiveValue]);
                    }, 0);
                }
                else { 
                    queue.push(handler);
                }
            }
    
            [linkPromise](thenalbe, catchable) { 
                function exec(data, handler, resolve, reject) { 
                    try { 
                        const result = handler(data); //得到当前Promise的处理结果
                        if (result instanceof Promise) { 
                            result.then(d => { 
                                resolve(d)
                            }, err => { 
                                reject(err);
                            })
                        }
                        else { 
                            resolve(result);
                        }
                    }
                    catch (err) { 
                        reject(err);
                    }
                }
    
                return new Promise((resolve, reject) => { 
                    this[settleHandle](data => { 
                        exec(data, thenalbe, resolve, reject);
                    }, RESOLVED, this[thenables])
    
                    this[settleHandle](reason => { 
                        exec(reason, catchable, resolve, reject);
                    }, REJECTED, this[catchables])
                })
            }
    
            then(thenable, catchable) { 
                return this[linkPromise](thenable, catchable);
            }
    
            catch(catchable) { 
    
                return this[linkPromise](undefined, catchable);
            }
    
    
            static all(proms) { 
                return new Promise((resolve, reject) => { 
                    const results = proms.map(p => { 
                        const obj = { 
                            result: undefined,
                            isResolved: false
                        }
                        p.then(data => { 
                            obj.result = data;
                            obj.isResolved = true;
                            //判断是否所有的全部完成
                            const unResolved = results.filter(r => !r.isResolved)
                            if (unResolved.length === 0) { 
                                //全部完成
                                resolve(results.map(r => r.result));
                            }
                        }, reason => { 
                            reject(reason);
                        })
                        return obj;
                    })
                })
            }
    
            static race(proms) { 
                return new Promise((resolve, reject) => { 
                    proms.forEach(p => { 
                        p.then(data => { 
                            resolve(data);
                        }, err => { 
                            reject(err);
                        })
                    })
                })
            }
    
            static resolve(data) { 
                if (data instanceof Promise) { 
                    return data;
                }
                else { 
                    return new Promise(resolve => { 
                        resolve(data);
                    })
                }
            }
    
            static reject(reason) { 
                return new Promise((resolve, reject) => { 
                    reject(reason);
                })
            }
        }
    })();

发表评论取消回复

表情：

评论列表（有 0 条评论，406人围观）

还没有评论，来说两句吧...

相关阅读

相关 Promise的使用（ES6）

1.什么叫异步编程：如果程序调用某个方法，等待其执行全部处理后才能继续执行，我们称其为同步的。相反，在处理完成之前就返回调用方法则是异步的。如果你是做前端的那么就

今天药忘吃喽~/ 2023年09月27日 11:01/ 0 赞/ 113 阅读

相关 ES6 Promise

Promise promise对象从语法上来看呢，是一个构造函数，用来生成Promise实例，用来封装异步操作，并提供成功后或失败后的结果所谓Promise，简单说

怼烎@/ 2022年12月01日 15:58/ 0 赞/ 219 阅读

相关 ES6 Promise

promise是一种解决异步函数传递数据问题回调函数解决---->回调地狱 .Promise Promise是一个对象，使用时需要创建这个对象 new P

r囧r小猫/ 2022年11月24日 14:11/ 0 赞/ 202 阅读

相关 es6 Promise

传统实现异步操作就是采用回调函数，回调函数方式本身没有什么问题，但是在多重回调层层嵌套的情况下，那么代码的可阅读性就会出现问题。 Promise对象是一个新的异步操作解决方

曾经终败给现在/ 2022年06月09日 14:45/ 0 赞/ 262 阅读

相关 ES6-Promise

Promise what? 在我看来Promise就相当于一个承诺容器，将所要执行的事件存贮在promise容器中。 Promise在ES6中被统一规范，由浏览

深碍√TFBOYSˉ_/ 2022年06月08日 11:08/ 0 赞/ 460 阅读

相关 ES6-Promise

1. Promise的基础 (1)js的异步操作: a. ajax请求 b. 浏览器事件 c. 定时，setTime setInteval

ゞ浴缸里的玫瑰/ 2022年05月15日 07:52/ 0 赞/ 301 阅读

相关 ES6 promise

作用：就是解决异步回调问题的 let promise = new Promise(function(resolve, reject){ })

小灰灰/ 2022年04月13日 06:14/ 0 赞/ 579 阅读

相关 ES6 —— Promise

不使用 ES6 Promise 嵌套两个 setTimeout 回调函数 setTimeout(function(){ console.log('hel

深碍√TFBOYSˉ_/ 2021年12月21日 17:19/ 0 赞/ 350 阅读

相关 ES6 Promise

[https://blog.csdn.net/shan1991fei/article/details/78966297][https_blog.csdn.net_shan19

偏执的太偏执、/ 2021年12月08日 17:13/ 0 赞/ 351 阅读

相关使用ES6模拟Promise

const Promise = (() => { const PENDING = "pending", RESOLVED =

谁践踏了优雅/ 2021年09月20日 04:26/ 0 赞/ 407 阅读