Promise源码解密-同步版

系列文章

1. Promise源码解密-PromisesA+标准
2. Promise源码解密-同步版
3. Promise源码解密-异步版
4. Promise源码解密-then的链式调用
5. Promise源码解密-catch/resolve/reject/race

创作不易 拒绝白嫖 点个赞呗
关注专栏 Promise源码解密,带你走进Promise的深处！！！

---

实现代码

// 定义状态常量
const STATUS_PENDING = 'pending'
const STATUS_FULFILLED = 'fulfilled'
const STATUS_REJECTED = 'rejected'
class MyPromise {

    // 接收一个 执行器
    // new Promise的时候，执行器立即执行，
    // 执行的时候根据指定函数执行
    // 并且程序报错的情况下
    constructor(executor) {
        this.status = STATUS_PENDING
        this.value = undefined
        this.reason = undefined
        try {
            executor(this.resolve, this.reject)
        } catch (error) {
            //  报错的话直接将错误原因作为reason
            this.reject(error)
        }
    }
    // 这里为啥使用箭头函数而不是resolve(){}
    // 这是因为上面的executor调用的时候，resolve中的this其实是undefined
    // executor单独调用了resolve/reject 这时，这两个方法存在于执行是的环境，this不再指向实例
    // 箭头函数内部的this总是指向定义时所在的对象
    resolve = (value) => {
        // 判断状态是不是
        if (this.status === STATUS_PENDING) {
            console.log('执行resolve')
            // 这里接收传进来的结果
            this.value = value
            this.status = STATUS_FULFILLED
        }
    }
    reject = (reason) => {
        if (this.status === STATUS_PENDING) {
            console.log('执行reject')
            // 这里接收传进来的错误的结果
            this.reason = reason
            this.status = STATUS_REJECTED
        }

    }
    then(onFulfilled, onReject) {
        console.log('执行then时的状态: ',this.status)
        if (this.status === STATUS_FULFILLED) {
            console.log("执行 onFulfilled")
            onFulfilled(this.value)
        }
        if (this.status === STATUS_REJECTED) {
            console.log("执行 onReject")
            onReject(this.reason)
        }
    }
}

实例1

let t = new MyPromise((resolve, reject) => {
    // 指定执行哪个，resolve和reject最终只会执行一个
    // console.log(a)  // 执行console会报错，最终只会执行reject
    resolve("res")
    reject('reject')
})
t.then((res) => {
    console.log(res)
}, (error) => {
    console.log(error)
})
当不执行console.log(a)的时候执行的是resolve
否则 执行的reject

实例2

let t = new MyPromise((resolve, reject) => {
    // 指定执行哪个，resolve和reject最终只会执行一个
    // console.log(a)  // 执行console会报错，最终只会执行reject
    // // resolve("res")
    // reject('reject')
    setTimeout(()=>{
        resolve('异步执行结束')
    },1000)
})
t.then((res) => {
    console.log(res)
}, (error) => {
    console.log(error)
})

这里面写了一个异步事件，根据js执行机制，输出的结果是：
执行then时的状态:  pending
执行resolve
看出先执行了同步的then，然后执行异步