promise 原理

class KPromise {
    constructor(    ) {
        this['[[PromiseState]]'] = "pendding";
        this['[[PromiseResult]]'] = undefined;
        // handle(val=>{
        //     this['[[PromiseState]]'] = "fulfilled";
        //     this['[[PromiseResult]]'] = val;
        // },val=>{
        //     this['[[PromiseState]]'] = "rejected";
        //     this['[[PromiseResult]]'] = val;
        // });
        // this.resolveFn = undefined;
        // this.rejectFn = undefined;
        this.resolveQueue = [];
        this.rejectQueue = [];

        handle(this.#resolve.bind(this), this.#reject.bind(this));
    }
    #resolve(val) {
        // console.log(this);
        this['[[PromiseState]]'] = "fulfilled";
        this['[[PromiseResult]]'] = val;
        // this.resolveFn && this.resolveFn(val)
        // 队列执行
        const run = () => {
            let cb;
            while (cb = this.resolveQueue.shift()) {
                cb && cb(val);
            }
        }
        // setTimeout(run)
        const observer = new MutationObserver(run);
        observer.observe(document.body, {
            attributes: true
        })
        document.body.setAttribute("kkb", "value");
    }
    #reject(err) {
        this['[[PromiseState]]'] = "rejected";
        this['[[PromiseResult]]'] = err;
        // this.rejectFn && this.rejectFn(err);
        const run = () => {
            let cb;
            while (cb = this.rejectQueue.shift()) {
                cb && cb(err);
            }
        }
        // setTimeout(run)
        const observer = new MutationObserver(run);
        observer.observe(document.body, {
            attributes: true
        })
        document.body.setAttribute("kkb", "value");
    }
    then(onResolved, onRejected) {
        // if(this['[[PromiseState]]'] === 'fulfilled'){
        //     onResolved && onResolved(this['[[PromiseResult]]']);
        // }else if(this['[[PromiseState]]'] === 'rejected'){
        //     onRejected && onRejected(this['[[PromiseResult]]']);
        // }
        // console.log(this['[[PromiseState]]']);
        // onResolved onRejected 应该是和 resolve 及 reject 相关的；
        // 不执行 保存回调 在执行 #resolve  及#reject 时候执行回调
        // this.resolveFn = onResolved;
        // this.rejectFn = onRejected;
        // 多个then处理 ，1.队列保存 2.队列执行
        // this.resolveQueue.push(onResolved);
        // this.rejectQueue.push(onRejected);
        return new KPromise((resolve, reject) => {
            // let res = onResolved();
            //     resolve("测试数据");
            const resolveFn = val => {
                let res = onResolved && onResolved(val);
                // console.log("123",res instanceof KPromise)
                if (res instanceof KPromise) {
                    // 取到值 赋给新的Kpromise对象
                    // res.then(result=>{
                    //     resolve(result);
                    // })
                    res.then(resolve);
                } else {
                    resolve(res)
                }
            }
            this.resolveQueue.push(resolveFn);

            const rejectFn = err => {
                onRejected && onRejected(err);
                reject(err)
            }
            this.rejectQueue.push(rejectFn);
        })
    }
    static resolve(val) {
        return new KPromise(resolve => {
            resolve(val);
        })
    }
    static reject(err) {
        return new KPromise((resolve, reject) => {
            reject(err);
        })
    }
    static race(lists) {
        return new KPromise((res, rej) => {
            lists.forEach(p => {
                p.then(result => {
                    res(result);
                }, err => {
                    rej(err);
                })
            })
            // for (let i = 0; i < lists.length; i++) {
            //     lists[i].then(result => {
            //         res(result);
            //     }, err => {
            //         rej(err);
            //     })
            // }
        })
    }
    static all(lists) {
        // 收集所有成功的结果
        let resArr = [];
        let num = 0;
        return new KPromise(resolve => {
            lists.forEach(p => {
                p.then(res => {
                    resArr.push(res);
                    num++;
                    if (num >= lists.length) {
                        resolve(resArr);
                    }
                })
            })
        })
    }

    static allSettled(lists){
        // [,,,]
        let resArr = new Array(lists.length);
        let num = 0;
        return new KPromise((resolve)=>{
            lists.forEach((p,key)=>{
                let obj = {};
                p.then(res=>{
                    obj['status'] = "fulfilled";
                    obj['value'] = res;
                    resArr[key] = obj;
                    num++
                    if (num >= lists.length) {
                        resolve(resArr);
                    }
                },err=>{
                    obj['status'] = "rejected";
                    obj['reason'] = err;
                    resArr[key] = obj;
                    num++;
                    if (num >= lists.length) {
                        resolve(resArr);
                    }
                })
            })
        })
    }

}

<script>
// let p = new KPromise((resolve,reject)=>{
//     setTimeout(()=>{
//         resolve("success");  //执行resolveQueue ---》 []
//         // reject('err');
//     },1000)
//     // reject('err');
// })
// console.log(p);
// p.then(res=>{
//     console.log(res);
// },err=>{
//     console.log("err",err);
// })

// 多个then
// p.then(res=>{
//     console.log(111,res);
// },err=>{
//     console.log(err);
// })

// then同步问题？？原因： 先执行了then的回调  后保存的then的队列 。解决：内部做延迟

// 微任务 宏任务 
// console.log(111);
// setTimeout(()=>{
//     console.log(222);
// })
//一、 promise对象的三种状态；如何实现？？
// let p = new KPromise((resolve,reject)=>{
//     // console.log(3333);
//     resolve("success");
//     // reject('err');
// })
// p.then(res=>{
//     console.log(4444,res)
// })
// console.log(5555);
// p.then(res=>{
//     console.log(111,res);
//     // return "外部then返还的值";
//     return new KPromise(resolve=>{
//         resolve("新promise对象的值");
//     })
// }).then(res=>{
//     console.log(222,res)
// })

// 周边方法
// let p =  KPromise.resolve(11);
// console.log(p);
// let p =  KPromise.reject("ERR");
// console.log(p);

let p1 = new KPromise((resolve,reject)=>{
    setTimeout(()=>{
        resolve(111);
    },2000)
})
let p2 = new KPromise((resolve,reject)=>{
    setTimeout(()=>{
        // resolve(2222);
        reject("err222")
    },1000)
})
// KPromise.all([p1,p2]).then(res=>{
//     console.log(res);
// })

KPromise.allSettled([p1,p2]).then(res=>{
    console.log(res);
})