手写一个Promise

这是一个基于javascript的Promise手写的一个Promise,如果你能看懂这个,那么Promise也就掌握了

const PROMISE_STATE = {
    PENDING: 0,
    FULFILLED: 1,
    REJECTED: 2
}



// 声明一个类
class MyPromise {

    // 声明一个私有变量 用于存储Promise的结果
    #result
    // 声明一个变量用来存储目前状态
    #state = PROMISE_STATE.PENDING
    // 创建一个变量来存储回调函数
    // 由于我们的回调函数数组，可能有多个，我们使用数组来存储数据
    #callbacks = []


    // 声明类的构造函数
    constructor(executor) {
        // 接受形参，并且给#resolve和reject指定this
        executor(this.#resolve.bind(this), this.#reject.bind(this))
    }

    #resolve(value) {
        // 把得到的结果传给reslve
        if (this.#state !== 0) { //如果已经被赋值过，判断当前状态
            return
        }
        this.#result = value
        this.#state = PROMISE_STATE.FULFILLED //完成赋值

        // 当这里被执行时，肯定是被赋值了，则调用then函数
        queueMicrotask(() => {
            this.#callbacks.forEach(cd => {
                cd()
            })
        })

    }
    // 失败时执行的方法
    #reject(reason) {

    }

    // 创建 then方法
    then(onFulfilled, onRejected) {
        // 判断是否完成赋值
        return new MyPromise((resolve, reject) => {
            // 如果没有完成赋值, Promise还没有接受到数据
            if (this.#state === PROMISE_STATE.PENDING) {
                // 则把回调函数给callback
                this.#callbacks.push(() => {
                    resolve(onFulfilled(this.#result))
                })
            } else if (this.#state === PROMISE_STATE.FULFILLED) {
                // 如果完成赋值，则返回结果
                // 则返回结果
                queueMicrotask(() => {
                    resolve(onFulfilled(this.#result))
                })
            }
        })
    }
}

// 调用类，Promise 存储数据
const mp = new MyPromise((resolve, reject) => {
    resolve('孙悟空');
})
// 读取数据
mp.then((result) => {
    console.log("读取数据1", result)
})
mp.then((result) => {
    console.log("读取数据2", result)
})
mp.then((result) => {
    console.log("读取数据3", result)
})