编辑代码

//JSRUN引擎2.0,支持多达30种语言在线运行,全仿真在线交互输入输出。 
//手写promise
//处理重复引用
function resolvePromise(x, p2, resolve, reject) {
    if (x === p2) {
        throw new TypeError('Chaining cycle detected for promise #<Promise>')
    }
    if (x instanceof TPromise) {
        x.then(res => resolve(res), err => reject(err))
    } else {
        resolve(x)
    }
}
//设置异步调用方法,关键api(queueMircrotask,MutationObserver,setTimeOut)
function runAsyncTask(callBack) {
    if (typeof queueMircrotask === 'function') {
        queueMircrotask(callBack)
    } else if (typeof MutationObserver === 'function') {
        const obs = new MutationObserver(callBack)
        const divNode = document.createElement('div')
        obs.observe(divNode, { childList: true })
        divNode.innerText("哈哈哈哈")
    } else {
        setTimeout(callBack, 0)
    }
}

const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'
class TPromise {
    result = undefined
    state = PENDING
    //定义私有变量
    #handlers = []
    constructor(func) {
        const resolve = (result) => {
            if (this.state === PENDING) {
                this.state = FULFILLED
                this.result = result
                this.#handlers.forEach(({ onFulfilled }) => {
                    onFulfilled(this.result)
                })
            }
        }
        const reject = (result) => {
            if (this.state === PENDING) {
                this.state = REJECTED
                this.result = result
                this.#handlers.forEach(({ onRejected }) => {
                    onRejected(this.result)
                })
            }
        }
        func(resolve, reject)
    }
    then(onFulfilled, onRejected) {
        //判断传入的参数是否是方法
        typeof onFulfilled === 'function' ? onFulfilled : x => x
        typeof onRejected === 'function' ? onRejected : x => { throw x }
        const p2 = new TPromise((resolve, reject) => {
            if (this.state === FULFILLED) {
                runAsyncTask(() => {
                    try{
                        const x = onFulfilled(this.result)
                        resolvePromise(x,p2,resolve,reject)
                    }catch(error){
                        reject(error)
                    }
                })
            } else if (this.state === REJECTED) {
                runAsyncTask(() => {
                    const x = onRejected(this.result)
                    resolvePromise(x,p2,resolve,reject)
                })
            } else if (this.state === PENDING) {
                this.#handlers.push({
                    onFulfilled: () => {
                        runAsyncTask(() => {
                            const x = onFulfilled(this.result)
                            resolvePromise(x,p2,resolve,reject)
                        })
                    }, onRejected: () => {
                        runAsyncTask(() => {
                            const x = onRejected(this.result)
                            resolvePromise(x,p2,resolve,reject)
                        })
                    }
                })
            }
        })
        return p2
    }
}


//测试代码
const p = new TPromise((resolve, reject) => {
    setTimeout(()=>{
        resolve('success')
    },2000)
})
p.then(res => {
    return new TPromise((resolve,reject)=>{
        resolve(2)
    })
},err=>{
    console.log('err',err)
    return 3
}).then(res => {
    console.log('res1:', res)
}, err => {
    console.log('err1:', err)
})