手动实现 Promise


class Promise {
    constructor(executor) {
        // 添加属性
        this.PromiseState = "pending";
        this.PromiseRuesult = null;
        // 声明属性,用来保存回调函数
        this.callbacks = [];
        // 保存实例对象的this值
        const self = this;

        // resolve 函数
        function resolve(data) {
            // 判断状态
            if (self.PromiseState !== "pending") return;
            // 1. 修改对象的状态 (promiseState)
            self.PromiseState = "fulfilled";
            // 2. 设置对象结果值 (promiseResult)
            self.PromiseRuesult = data;
            // 执行回调
            setTimeout(() => {
                self.callbacks.forEach((item) => {
                    item.onResolved(data);
                });
            });
        }
        // reject 函数
        function reject(data) {
            // 判断状态
            if (self.PromiseState !== "pending") return;
            // 1. 修改对象的状态 (promiseState)
            self.PromiseState = "rejected";
            // 2. 设置对象结果值 (promiseResult)
            self.PromiseRuesult = data;
            // 执行回调
            setTimeout(() => {
                self.callbacks.forEach((item) => {
                    item.onRejected(data);
                });
            });
        }

        try {
            // 同步调用 【执行器函数】
            executor(resolve, reject);
        } catch (e) {
            reject(e);
        }
    }

    // then 方法封装
    then(onResolved, onRejected) {
        const self = this;
        // 判断回调函数参数
        if (typeof onRejected !== "function") {
            onRejected = (reason) => {
                throw reason;
            };
        }
        if (typeof onResolved !== "function") {
            onResolved = (value) => value;
        }
        return new Promise((resolve, reject) => {
            function callback(typeFunc) {
                try {
                    // 获取回调函数的执行结果
                    let result = typeFunc(self.PromiseRuesult);
                    // 判断
                    if (result instanceof Promise) {
                        result.then(
                            (v) => {
                                resolve(v);
                            },
                            (r) => {
                                reject(r);
                            }
                        );
                    } else {
                        resolve(result);
                    }
                } catch (e) {
                    reject(e);
                }
            }
            // 调用回调函数
            if (this.PromiseState === "fulfilled") {
                callback(onResolved);
            }
            if (this.PromiseState === "rejected") {
                callback(onRejected);
            }

            // 判断pending的状态
            if (this.PromiseState === "pending") {
                this.callbacks.push({
                    onResolved: function () {
                        callback(onResolved);
                    },
                    onRejected: function () {
                        callback(onRejected);
                    },
                });
            }
        });
    }

    //catch 方法
    catch(onRejected) {
        return this.then(undefined, onRejected);
    }

    //添加 resolve 方法
    static resolve(value) {
        //返回promise对象
        return new Promise((resolve, reject) => {
            if (value instanceof Promise) {
                value.then(
                    (v) => {
                        resolve(v);
                    },
                    (r) => {
                        reject(r);
                    }
                );
            } else {
                //状态设置为成功
                resolve(value);
            }
        });
    }

    //添加 reject 方法
    static reject(reason) {
        return new Promise((resolve, reject) => {
            reject(reason);
        });
    }

    //添加 all 方法
    static all(promises) {
        //返回结果为promise对象
        return new Promise((resolve, reject) => {
            //声明变量
            let count = 0;
            let arr = [];
            //遍历
            for (let i = 0; i < promises.length; i++) {
                //
                promises[i].then(
                    (v) => {
                        //得知对象的状态是成功
                        //每个promise对象 都成功
                        count++;
                        //将当前promise对象成功的结果 存入到数组中
                        arr[i] = v;
                        //判断
                        if (count === promises.length) {
                            //修改状态
                            resolve(arr);
                        }
                    },
                    (r) => {
                        reject(r);
                    }
                );
            }
        });
    }

    //添加 race 方法
    static race(promises) {
        return new Promise((resolve, reject) => {
            for (let i = 0; i < promises.length; i++) {
                promises[i].then(
                    (v) => {
                        //修改返回对象的状态为 『成功』
                        resolve(v);
                    },
                    (r) => {
                        //修改返回对象的状态为 『失败』
                        reject(r);
                    }
                );
            }
        });
    }
}


文章作者: 程序猿小野
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 程序猿小野 !
评论