ES6-promise简单实现

// 从promise的概念和使用分析:
/**
 * 一句话:利用3个状态,当执行一次后状态改变同时执行then中当所有事件;状态改变后,不会在执行
 * 1. 构造函数
 * 2. 3个状态:PENDING,FULFILLED,REJECTED,状态一旦确定为FULFILLED,REJECTED就不会在更改
 * 3. 参数是函数,promise内部会给作为参数的函数,传递2个参数,resolve,reject
 * 4. resolved是一个函数和reject是一个函数,都是微任务,这样才能确保先于then执行
 * 5. promise执行成功会调用reslove,reslove对应then的第一个参数
 * 6. promise执行失败会调用reject,reject对应then的第二个参
 * 7. then可以有多个,所以我们需要在then中建立二个事件队列一个是reslove的,一个是reject的,
 * 8. 当reslove被调用时执行事件队列
 * 
 */
class MyPromise {
    // 3个状态:PENDING,FULFILLED,REJECTED
    static PENDING = "PENDING"
    static FULFILLED = "FULFILLED"
    static REJECTED = "REJECTED"
    constructor(handlerFn) {
        //定义初始的状态值
        this.state = MyPromise.PENDING;
        //promise内部会给作为参数的函数,传递2个参数,resolve,reject
        handlerFn(this._resolve.bind(this), this._reject.bind(this));
        //获取reslove传入的值
        this.params;
        //建立二个事件队列一个是reslove的,一个是reject的,
        this.resloveEventList = [];
        this.rejectEventList = [];
    }
    _resolve(val) {
        //h5提供的微任务message,吧resolve变为微任务
        window.addEventListener('message', _ => {
            //当reslove被调用时执行事件队列,状态一旦确定为FULFILLED,REJECTED就不会在更改,意味着不会在执行
            if (this.state !== MyPromise.PENDING) { return };
            this.state = MyPromise.FULFILLED;
            this.params=val;
            //执行事件队列中的所有内容
            this.resloveEventList.forEach((reslove) => {
                reslove(this.params)
            });
            this.resloveEventList.length = 0
        })
        //出发message
        window.postMessage("")


    }
    _reject(val) {
        window.addEventListener('message', _ => {
            //当reslove被调用时执行事件队列,状态一旦确定为FULFILLED,REJECTED就不会在更改,意味着不会在执行
            if (this.state !== MyPromise.PENDING) { return };
            this.state = MyPromise.REJECTED;
            this.params=val;
            //执行事件队列中的所有内容
            this.rejectEventList.forEach((reslove) => {
                reslove(this.params)
            });
            this.rejectEventList.length = 0
        })
        //出发message
        window.postMessage("")
    }
    //调用then
    then(resloveSucc, rejectFaile) {
        //then可以有多个,所以我们需要在then中建立二个事件队列一个是reslove的,一个是reject的,
        if (typeof resloveSucc == 'function') {
            this.resloveEventList.push(resloveSucc);
        }
        if (typeof rejectFaile == 'function') {
            this.rejectEventList.push(rejectFaile);
        }
    }
}

调用测试:

 <script src="./promise.js"></script>
    <script>
    var p=new MyPromise((reslove,rejuect)=>{
        setTimeout(()=>{
            console.log(1000);
            reslove(111)
        },2000)
    }).then((val)=>{
        console.log(val);
    })
输出结果1000,111