手动实现 Promise

本文详细介绍了JavaScript中的Promise类,包括其构造函数、resolve和reject方法,以及then、catch、all和race等常用方法的实现原理和用途。
摘要由CSDN通过智能技术生成
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);
                    }
                );
            }
        });
    }
}

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序猿小野

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值