简单实现一个Promise

news/2024/7/10 23:56:22 标签: javascript, 前端, es6

javascript">function MyPromise(fn) {
    pending = '待定';
    fulfilled = '成功';
    rejected = '失败';

    // 定义初始化状态
    this.status = pending;
    this.res = null;
    this.ret = null;

    // resolve 时的函数数组
    this.resolveCallBack = [];
    // reject 时的函数数组
    this.rejectCallBack = [];

    // 定义 resolve 和 reject 函数
    const resolve = (res) => {
        setTimeout(() => {
            if (this.status === pending) {
                // 变更状态
                this.status = fulfilled;
                // 保存值
                this.res = res;
                this.resolveCallBack.forEach((callback) => callback(this.res));
            }
        }, 1000);
    };
    const reject = (ret) => {
        setTimeout(() => {
            if (this.status === pending) {
                // 变更状态
                this.status = rejected;
                // 保存值
                this.ret = ret;
                this.rejectCallBack.forEach((callback) => callback(this.ret));
            }
        }, 1000);
    };
    // 因为初始化的时候该函数就被执行了,并且接受两个函数作为参数
    // 初始化时如果遇到错误会直接 reject 出去
    try {
        fn(resolve, reject);
    } catch (error) {
        reject(error);
    }
}
// 定义then方法
MyPromise.prototype.then = function (onFulfilled, onRejected) {
    // .then 方法会返回一个新的 Promise 对象
    return new MyPromise((resolve, reject) => {
        if (this.status === pending) {
            // onFulfilled 和  onRejected 是异步完成的,这里只要把函数 push 进去就可以啦
            resolve(this.resolveCallBack.push(onFulfilled));
            this.rejectCallBack.push(onRejected);
        }
        if (this.status === fulfilled) {
            onFulfilled(this.res);
        }
        if (this.status === rejected) {
            onRejected(this.ret);
        }
    });
};

//测试
const promise = new MyPromise(function (resolve, reject) {
    throw new Error('报错');
    reject(3);
    console.log(1);
})
    .then((res) => {
        console.log(res);
    }, (ret) => {
        console.log(ret);
    })
    .then((res) => {
        console.log(4);
    });
console.log(2);
//   最终输出的结果为: 2、报错、4
// 因为直接抛出错误了,所以后面的 reject 和 console 就不会再执行了

还有很多边界条件需要判断和优化的,这里只是简单实现一下

双手给你点赞 GIF 动图表情包_动图_点赞_gif表情


http://www.niftyadmin.cn/n/1409199.html

相关文章

Mac上打开多个Eclipse

Mac上打开多个Eclipse方法是:找到Eclipse.app的位置,在Terminal中cd到这个目录 然后执行: [html] view plaincopy open -n Eclipse.app 也可以直接将 Eclipse.app拉入到Terminal,在路径前面加上 open -n

经典编程书籍大全

2019独角兽企业重金招聘Python工程师标准>>> 经典编程书籍大全 100 经典技术书籍,涵盖:计算机系统与网络、系统架构、算法与数据结构、前端开发、后端开发、移动开发、数据库、测试、项目与团队、程序员职业修炼、求职面试 和 编程相关的经典…

new都做了什么,实现一个new

首先创建一个新的空对象根据原型链,设置空对象的__proto__为构造函数的prototype构造函数的this指向这个对象,并执行构造函数的代码(为这个新对象添加属性)判断函数的返回值类型,如果是引用类型,就返回这个引用类型的对象 function myNew(context,...args) {const obj new Obj…

python数据透视表计数去除重复_python - 如何按子类别的不同计数对数据框/数据透视表进行排序? - 堆栈内存溢出...

重置索引以使数据透视表具有DataFrame的形状>>> df df.reset_index(dropTrue)>>> dfinvestor company round roundSize0 investor1 Foo A 101 investor2 Bar A 102 investor2 Foo A 103 investor3 Bar A 104 investor3 Bar B 155 investor4 Bar B 156 inves…

nginx源码学习资源

nginx源码学习资源(不断更新) 2012-06-13 21:32 by 轩脉刃, 21783 阅读, 4 评论, 收藏, 编辑 nginx源码学习是一个痛苦又快乐的过程,下面列出了一些nginx的学习资源。 首先要做的当然是下载一份nginx源码,可以从nginx官方网站下载…

DNS分离及解析服务

1、设置双网卡,分别用于内、外网用户;2、配置主配置文件;3、配置区域配置文件;4、配置内、外网用户的区域数据配置文件;5、开启服务;6、使用两台win7虚拟机分别模拟内外网用户,并进行验证&#…

python 角度传感器模拟_使用python从三个角度解决josephus问题的方法

0 写在前面josephus问题是数据结构教材中的一个常见实例,其问题可以描述为:设nnn个人围坐一圈,现在要求从第kkk个人开始报数,报到第mmm个的人退出。然后从下一个人开始继续按照同样规则报数并退出,直到所有人退出为止。…

个人开发者如何申请微信小程序

2019独角兽企业重金招聘Python工程师标准>>> 微信小程序已于昨天(2017年1月9日)正式对公众发布。各位猿啊汪啊的朋友圈是不是已经被刷爆了? 作为一只有(xiang)情(gen)怀(feng)的程序猿,你一定跃跃欲试想要体验一把小程…