手写Promise结构的设计和then方法

1：结构的设计

主要思路：

构造函数 Class----就可以new来调用

利用constructor实现函数的调用（executor)

实现调用了reject()resolve无效调用 ---记录Promise的状态

 const PEOMISE_STATUS_PENDING='pending'  默认状态

 const PEOMISE_STATUS_FULFILLED='fulfilled'

 const PEOMISE_STATUS_REJECTED='rejected'

if判断是某状态就执行某回调

考虑传递参数 保存参数默认undefined

2：then方法

在构造的类里面写一个then函数

执行then传入进来的回调函数

巧妙运用定时器来调整代码执行顺序----->queueMicrotask(规范)

const PEOMISE_STATUS_PENDING = 'pending'
const PEOMISE_STATUS_FULFILLED = 'fulfilled'
const PEOMISE_STATUS_REJECTED = 'rejected'
class tyyPromise {
    constructor(executor) {
        this.status = PEOMISE_STATUS_PENDING
        this.value = undefined
        this.reason = undefined
        const resolve = (value) => {
            if (this.status === PEOMISE_STATUS_PENDING) {
                this.status = PEOMISE_STATUS_FULFILLED
                queueMicrotask(() => {
                    this.value = value
                    this.onFulfilled(this.value);
                })
            }


        }
        const reject = (reason) => {
            if (this.status === PEOMISE_STATUS_PENDING) {
                this.status = PEOMISE_STATUS_REJECTED
                //以免then还没执行
                queueMicrotask(() => {
                    this.reason = reason
                    this.onFulfilled(this.reason);
                })
            }
        }

        executor(resolve, reject)
    }
    then(onFulfilled, onRejected) {
        this.onFulfilled = onFulfilled
        this.onRejected = onRejected

    }
}
const promise = new tyyPromise((resolve, reject) => {
    // console.log('pending');
    reject(111)
    resolve(222)

})
promise.then(res => {
    console.log('res:', res);
}, err => {
    console.log('err:', err);
})

 

 这样就能简单的实现Promise的基本功能

但是有待完善 比如 多次调用then都会执行，链式调用等等