Javascript七：实现Promise

三种状态

pending,resolved,rejected,状态一旦确定不可更改

class MyPromise {
    constructor(handle) {
        this['[[PromiseStatus]]'] = "pending"
        this['[[PromiseValue]]'] = undefined
        handle(this.resolve.bind(this), this.reject.bind(this))
    }
    resolve(val) {
        if (this['[[PromiseStatus]]'] === "pending") {
            this['[[PromiseStatus]]'] = "resolved"
            this['[[PromiseValue]]'] = val
        }
    }
    reject(err) {
        if (this['[[PromiseStatus]]'] === "pending") {
            this['[[PromiseStatus]]'] = "rejected"
            this['[[PromiseValue]]'] = err
        }
    }
}

then方法

需要异步执行resolveFn和rejectFn，不然MyPromise里执行resolve或reject时，then里面的方法还没读取到。

可以用MutationObserver模拟微任务。

class MyPromise {
    constructor(handle) {
        this['[[PromiseStatus]]'] = "pending"
        this['[[PromiseValue]]'] = undefined
        handle(this.resolve.bind(this), this.reject.bind(this))
    }
    resolve(val) {
        if (this['[[PromiseStatus]]'] === "pending") {
            this['[[PromiseStatus]]'] = "resolved"
            this['[[PromiseValue]]'] = val
            const run = () => {
                this.resolveFn(val)
            }
            const observer = new MutationObserver(run);
            observer.observe(document.body, {
                attributes: true
            });
            document.body.setAttribute("key", "value");
        }

    }
    reject(err) {
        if (this['[[PromiseStatus]]'] === "pending") {
            this['[[PromiseStatus]]'] = "rejected"
            this['[[PromiseValue]]'] = err
            const run = () => {
                this.rejectFn(err)
            }
            const observer = new MutationObserver(run);
            observer.observe(document.body, {
                attributes: true
            });
            document.body.setAttribute("key", "value");
        }

    }
    then(resolveFn, rejectFn) {
        this.resolveFn = resolveFn
        this.rejectFn = rejectFn
    }
}

支持并列多个then

并列的then都是获取到调用then的Promise对象的值。

let p = new Promise((resolve, reject) => {
    resolve('success');
    // reject("err");
})
p.then(res => {
    console.log(1, res);
})
p.then(res => {
    console.log(2, res);
})
// 1 "success"
// 2 "success"

需要用一个数组存储then传进来的函数。在resolved或rejected后遍历执行。

class MyPromise {
    constructor(handle) {
        this['[[PromiseStatus]]'] = "pending"
        this['[[PromiseValue]]'] = undefined
        this.resolveQueue = []
        this.rejectQueue = []
        handle(this.resolve.bind(this), this.reject.bind(this))
    }
    resolve(val) {
        if (this['[[PromiseStatus]]'] === "pending") {
            this['[[PromiseStatus]]'] = "resolved"
            this['[[PromiseValue]]'] = val
            const run = () => {
                let cb;
               // 直接删除而不是forEach遍历执行，是因为都是用的事件监听，不然后面会被重复执行
                while (cb = this.resolveQueue.shift()) {
                    cb && cb(val);
                }
            }
            const observer = new MutationObserver(run);
            observer.observe(document.body, {
                attributes: true
            });
            document.body.setAttribute("key", "value");
        }
    }
    reject(err) {
        if (this['[[PromiseStatus]]'] === "pending") {
            this['[[PromiseStatus]]'] = "rejected"
            this['[[PromiseValue]]'] = err
            const run = () => {
                let cb;
                while (cb = this.rejectQueue.shift()) {
                    cb && cb(err);
                }
            }
            const observer = new MutationObserver(run);
            observer.observe(document.body, {
                attributes: true
            });
            document.body.setAttribute("key", "value");
        }
    }
    then(resolveFn, rejectFn) {
        this.resolveQueue.push(resolveFn)
        this.rejectQueue.push(rejectFn)
    }
}

链式调用then

then执行返回的是一个新的promise对象，

可以返回正常值，若返回promise对象，会自动解析入参传递给下一个then。

let p2 = new Promise((resolve, reject) => {
    resolve("success");
    // reject("err");
}).then(res => {
    console.log(1, res);//1 "success"
    return 1
}).then(res => {
    console.log(2, res);//2 1
    return new Promise((resolve) => {
        resolve('2promise')
    })
}).then(res => {
    console.log(3, res);//3 "2promise"
})

class MyPromise {
    constructor(handle) {
        this['[[PromiseStatus]]'] = "pending"
        this['[[PromiseValue]]'] = undefined
        this.resolveQueue = []
        this.rejectQueue = []
        handle(this.resolve.bind(this), this.reject.bind(this))
    }
    resolve(val) {
        if (this['[[PromiseStatus]]'] === "pending") {
            this['[[PromiseStatus]]'] = "resolved"
            this['[[PromiseValue]]'] = val
            const run = () => {
                let cb;
                while (cb = this.resolveQueue.shift()) {
                    cb && cb(val);
                }
            }
            const observer = new MutationObserver(run);
            observer.observe(document.body, {
                attributes: true
            });
            document.body.setAttribute("key", "value");
        }
    }
    reject(err) {
        if (this['[[PromiseStatus]]'] === "pending") {
            this['[[PromiseStatus]]'] = "rejected"
            this['[[PromiseValue]]'] = err
            const run = () => {
                let cb;
                while (cb = this.rejectQueue.shift()) {
                    cb && cb(err);
                }
            }
            const observer = new MutationObserver(run);
            observer.observe(document.body, {
                attributes: true
            });
            document.body.setAttribute("key", "value");
        }
    }
    then(resolveFn, rejectFn) {
        return new MyPromise((resolve, reject) => {
            // 返回一个新的Promise
            // 需要取到上一个then的返回值
            // 判断返回的结果是正常值直接返回，是Promise值需要取出来返回
            function TResolveFn(val) {
                let result = resolveFn && resolveFn(val)
                if (result instanceof MyPromise) {
                    result.then(res => {
                        resolve(res)
                    }, err => {
                        reject(err)
                    })
                } else {
                    resolve(result)
                }
            }
            this.resolveQueue.push(TResolveFn)

            function TRejectFn(val) {
                let result = rejectFn && rejectFn(val)
                if (result instanceof MyPromise) {
                    result.then(res => {
                        resolve(res)
                    }, err => {
                        reject(err)
                    })
                } else {
                    reject(result)
                }
            }
            this.rejectQueue.push(TRejectFn)
        })
    }
}

catch和finally方法

    catch(fn) {
        return this.then(undefined, fn);
    }
    finally(fn) {
        //不管成功失败都会执行
        this.then(fn, fn)
    }

静态方法

resolve

返回一个成功状态Promise

    static resolve(result) {
        return new MyPromise((resolve) => {
            resolve(result)
        })
    }

reject

返回一个失败状态Promise

    static reject(result) {
        return new MyPromise((resolve, reject) => {
            reject(result)
        })
    }

all

接受一个Promise数组，返回一个新的Promise，
如果Promise都成功，按数组顺序返回成功状态，
若有一个失败，返回最先被reject的值。

        static all(promiseAry) {
        let result = []
        let num = 0
        return new MyPromise((resolve, reject) => {
            for (let i = 0; i < promiseAry.length; i++) {
                promiseAry[i].then((res) => {
                    result[i] = res
                    num++
                    if (num === promiseAry.length) {
                        resolve(result)
                    }
                }, err => {
                    reject(err)
                })
            }
        })
    }

race

接受一个Promise数组，返回一个新的Promise，
返回最快响应的Promise

    static race(promiseAry) {
        return new MyPromise((resolve, reject) => {
            for (let i = 0; i < promiseAry.length; i++) {
                promiseAry[i].then((res) => {
                    resolve(res)
                }, err => {
                    reject(err)
                })
            }
        })
    }

allSettled

接受一个Promise数组，返回一个新的Promise，

不管成功和失败都会返回，数据结构如下

  //成功：
  {
  status: "fulfilled"
  value: "success"
  }
  //失败
  {
  reason: "err"
  status: "rejected"
  }

    static allSettled(promiseAry) {
        let result = []
        let num = 0
        return new MyPromise((resolve, reject) => {
            for (let i = 0; i < promiseAry.length; i++) {
                promiseAry[i].then((res) => {
                    result[i] = {
                        status: "fulfilled",
                        value: res
                    }
                    num++
                    if (num === promiseAry.length) {
                        resolve(result)
                    }
                }, err => {
                    result[i] = {
                        status: "rejected",
                        value: err
                    }
                    num++
                    if (num === promiseAry.length) {
                        resolve(result)
                    }
                })
            }
        })
    }