NodeJS - Promise的实现

通过Promise的功能特性,写一个我们自己的Promise函数,帮助自己更好的去理解Promise异步编程😉

1、源码实现

1.1 ES5的原型方式实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise</title>
</head>

<body>
    <script>
        const PENDING = 'pending';
        const RESOLVED = 'resolved';
        const REJECTED = 'rejected';

        function MyPromise(fn) {
            /* 保存初始化状态 */
            let self = this;

            /* 初始化状态 */
            this.state = PENDING;

            /* 保存 resolve 或者 rejected 传入的值 */
            this.value = null

            /* 保存 resolve 的回调函数 */
            this.resolveCallbacks = [];

            /* 保存rejected 的回调函数 */
            this.rejectedCallbacks = [];

            /* 转态转变为 resolved 的方法 */
            function resolve(value) {
                // 判断传入元素是否为 Promise 值,如果是, 则状态改变必须等待前一个状态改变后再进行改变
                if (value instanceof MyPromise) {
                    return value.then(resolve, reject);
                }

                // 保证代码的执行顺序为本轮事件循环的末尾
                setTimeout(_ => {
                    // 只有状态为 pending 时才能转变,
                    if (self.state === PENDING) {
                        //  修改状态
                        self.state = RESOLVED;

                        // 设置传入的值
                        self.value = value;

                        // 执行回调函数
                        self.resolveCallbacks.forEach(callback => {
                            callback(value);
                        })
                    }
                }, 0)
            }

            /* 状态转变为 rejected 的方法 */
            function reject(value) {
                // 保证代码的执行顺序为本轮事件循环的末尾
                setTimeout(_ => {
                    // 状态只有为 pending 时才能转变
                    if (self.state === PENDING) {
                        // 修改状态
                        self.state = REJECTED;

                        // 设置传入的值
                        self.value = value;

                        // 执行回调函数
                        self.rejectedCallbacks.forEach(callback => {
                            callback(value);
                        })
                    }
                }, 0)
            }

            /* 将两个方法传入函数中执行 */
            try {
                fn(resolve, reject)
            } catch (e) {
                // 遇到错误的时候,捕获错误,执行 reject 函数
                reject(e)
            }
        }

        MyPromise.prototype.then = function (onResolved, onRejected) {
            // 首先判断两个参数是否为函数类型,因为这两个参数是可选参数
            onResolved = typeof onResolved === 'function' ? onResolved : function (value) {
                return value;
            };

            onRejected = typeof onRejected === 'function' ? onRejected : function (error) {
                return error;
            };

            // 如果是等待状态,则将函数加入对应列表中
            if(this.state === PENDING){
                this.resolveCallbacks.push(onResolved);
                this.rejectedCallbacks.push(onRejected);
            }

            // 如果状态已经确定,则直接执行对应状态的函数
            if(this.state === RESOLVED){
                onResolved(this.value)
            }

            if(this.state === REJECTED){
                onRejected(this.value)
            }
        }
    </script>
</body>

</html>

2、使用

let p = new MyPromise(function(resolve, reject){
    setTimeout(function(){
        return resolve(1)
    }, 5000)
})

p.then(res => {
    console.log("@res", res);
})

相关文章


在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

一只 小网虫

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

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

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

打赏作者

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

抵扣说明:

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

余额充值