手写Promise实现(不包含静态方法)

手写Promise实现

#基本promise 不包含 all 等方法

定义状态常量

const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';

封装函数，将同步任务放入微任务队列

function runsynctask(callback) {
    return queueMicrotask(callback);
}

resolvePromise 函数

function resolvePromise(promise2, x, resolve, reject) {
    if (x === promise2) {
        throw new TypeError('Chaining cycle detected for promise');
    }
    if (x instanceof NewPromise) {
        x.then(res => resolve(res), err => reject(err));
    } else {
        resolve(x);
    }
}

NewPromise 类

class NewPromise {
    state = PENDING;
    result = null;
    #handlers = [];

    constructor(func) {
        const resolve = (result) => {
            if (this.state === PENDING) {
                this.state = FULFILLED;
                this.result = result;
                this.#handlers.forEach(handler => {
                    handler.onFulfilled(result)
                })
            }
        }
        const reject = (error) => {
            if (this.state === PENDING) {
                this.state = REJECTED;
                this.result = error;
                this.#handlers.forEach(handler => {
                    handler.onRejected(error)
                })
            }
        }
        func(resolve, reject);
    }

    then(onFulfilled, onRejected) {
        typeof onFulfilled === 'function' ? onFulfilled : (value) => value;
        typeof onRejected === 'function' ? onRejected : (error) => { throw error };
        const promise2 = new NewPromise((resolve, reject) => {
            if (this.state === FULFILLED) {
                runsynctask(() => {
                    try {
                        const x = onFulfilled(this.result);
                        resolvePromise(promise2, x, resolve, reject)
                    } catch (error) {
                        reject(error);
                    }
                })
            } else if (this.state === REJECTED) {
                runsynctask(() => {
                    try {
                        const x = onRejected(this.result);
                        resolvePromise(promise2, x, resolve, reject)
                    } catch (error) {
                        reject(error);
                    }
                })
            } else if (this.state == PENDING) {
                this.#handlers.push({
                    onFulfilled: () => {
                        runsynctask(() => {
                            try {
                                const x = onFulfilled(this.result);
                                resolvePromise(promise2, x, resolve, reject)
                            } catch (error) {
                                reject(error);
                            }
                        })
                    },
                    onRejected: () => {
                        runsynctask(() => {
                            try {
                                const x = onRejected(this.result);
                                resolvePromise(promise2, x, resolve, reject)
                            } catch (error) {
                                reject(error);
                            }
                        })
                    }
                })
            }
        })
        return promise2;
    }
}

完整代码

//定义状态常量
const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';
//封装函数，将同步任务放入微任务队列
function runsynctask(callback) {
    return queueMicrotask(callback);
}
resolvePromise = (promise2, x, resolve, reject) => {
    if (x === promise2) {
        throw new TypeError('Chaining cycle detected for promise');
    }
    //判断x是否为promise
    if (x instanceof NewPromise) {
        x.then(res => resolve(res), err => reject(err));
    } else {
        resolve(x);
    }

}


class NewPromise {
    //状态
    state = PENDING;
    //结果
    result = null;
    //存储onFulfilled和onRejected
    #handlers = [];

    //构造函数
    constructor(func) {
        //定义resolve和reject函数
        const resolve = (result) => {
            //状态为pending时，改变状态和结果 实现不可逆
            if (this.state === PENDING) {
                this.state = FULFILLED;
                this.result = result;
                //执行存储的onFulfilled
                this.#handlers.forEach(handler => {
                    handler.onFulfilled(result)
                })
            }
        }
        const reject = (error) => {
            //状态为pending时，改变状态和结果 实现不可逆
            if (this.state === PENDING) {
                this.state = REJECTED;
                this.result = error;
                //执行存储的onRejected
                this.#handlers.forEach(handler => {
                    handler.onRejected(error)
                })
            }
        }
        func(resolve, reject)//执行传入的函数

    }
    then(onFulfilled, onRejected) {
        //如果onFulfilled不是函数，则将其设置为函数，返回结果
        typeof onFulfilled === 'function' ? onFulfilled : (value) => value;
        //如果onRejected不是函数，则将其设置为函数，抛出错误
        typeof onRejected === 'function' ? onRejected : (error) => { throw error };
        const promise2 = new NewPromise((resolve, reject) => {
            if (this.state === FULFILLED) {
                runsynctask(() => {
                    try {
                        const x = onFulfilled(this.result);
                        //判断x是否为promise2
                        resolvePromise(promise2, x, resolve, reject)

                    } catch (error) {
                        reject(error);
                    }
                })

            } else if (this.state === REJECTED) {
                runsynctask(() => {
                    try {
                        const x = onRejected(this.result);
                        //判断x是否为promise2
                        resolvePromise(promise2, x, resolve, reject)

                    } catch (error) {
                        reject(error);
                    }

                })

            } else if (this.state == PENDING) {
                this.#handlers.push({
                    onFulfilled: () => {
                        runsynctask(() => {
                            try {
                                const x = onFulfilled(this.result);
                                //判断x是否为promise2
                                resolvePromise(promise2, x, resolve, reject)

                            } catch (error) {
                                reject(error);
                            }
                        })
                    },
                    onRejected: () => {
                        runsynctask(() => {
                            try {
                                const x = onRejected(this.result);
                                //判断x是否为promise2
                                resolvePromise(promise2, x, resolve, reject)

                            } catch (error) {
                                reject(error);
                            }

                        })
                    }
                })
            }
        })
        return promise2;
    }

}