欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

手动实现Promise

程序员文章站 2022-05-21 17:19:35
Promise对大家来说并不是很陌生,它是一个异步编程的解决方案,主要解决了前端回调地域问题。用阮老师的话说,它“就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果”。 Promise有三种状态:pending(初始状态)、fulfilled(成功)、reject(失败),初 ......

  promise对大家来说并不是很陌生,它是一个异步编程的解决方案,主要解决了前端回调地域问题。用阮老师的话说,它“就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果”。

  promise有三种状态:pending(初始状态)、fulfilled(成功)、reject(失败),初始状态pending只能变成fulfilled或者reject,这一过程是不可逆的,当状态发生改变时,会触发对应的回调方法。除此之外,也支持链式调用,then/catch会返回一个promise,以供链式调用,盗用mdn上的一张图,promise的执行流程如下图所示:

  手动实现Promise

  具体实现简单分为以下四步:

    1、定义一个执行器fn,自带两个参数的函数,resolve/reject,在实例化promise时,调用执行器fn,传入参数reslove/reject,初始化回调事件队列tasklist
    2、在执行then方法时,判断是不是初始状态pending,如果是,则将then中fullfilled/reject的回调推进执行队列tasklist中,then方法返回一个promise实例
    3、实现链式回调中,用id来标识不同的promise实例
    4、当触发了执行器中参数函数时,根据id来判断当前执行的回调方法

  实现代码:

 1  //公共变量,用于标识mypromise实例
 2         index = 0;
 3         //promise接收一个回调函数fn,有两个参数,reslove,reject
 4         function mypromise(fn) {
 5             var _this = this;
 6             //promise的三种状态
 7             this.resolve = "fullfilled";
 8             this.pending = "pending";
 9             this.reject = "reject";
10             this.id = index++;
11             //初始默认状态为penddding
12             this.state = this.pending;
13             //执行任务列表
14             this.tasklist = [];
15             //最终执行的回调
16             this.finallycallback = null;
17             //bind改变reslove/reject函数体内this的指向,确保指向mypromise
18             fn.call(this, this.resolve.bind(this), this.reject.bind(this));
19         }
20 
21         mypromise.prototype.resolve = function(value) {
22             this.state = this.resolve;
23             //2、状态变更时,执行完成的方法
24             this.tasklist[this.id] && this.handler(this.tasklist[this.id], value);
25         };
26 
27         mypromise.prototype.reject = function(value) {
28             this.state = this.reject;
29             //2、状态变更时,执行完成的方法
30             this.tasklist[this.id] && this.handler(this.tasklist[this.id], value);
31         };
32         //执行任务回调
33         mypromise.prototype.handler = function(task, value) {
34             var result = null;
35             if (this.state === this.resolve) {
36                 result = task.onfullfilled(value);
37             } else if (this.state === this.reject) {
38                 result = task.onreject(value);
39             }
40             var nextid = this.id + 1;
41             //需要判断返回值是不是mypromise实例,如果是,将之前的任务队列赋值给新的mypromise实例
42             if (result instanceof mypromise) {
43                 result.id = nextid;
44                 result.tasklist = this.tasklist;
45                 result.finallycallback = this.finallycallback;
46             } else {
47                 //没有返回mypromise实例
48                 //如果有finally回调,则执行最终的回调
49                 this.finallycallback && this.finallycallback();
50             }
51         };
52         //onfullfilled:成功的回调,onreject:失败的回调
53         mypromise.prototype.then = function(onfullfilled, onreject) {
54             var _this = this,
55                 obj = {
56                     onfullfilled: onfullfilled,
57                     onreject: onreject
58                 };
59             //1、初始化时,将后续可能要执行的任务推送到执行任务队列中
60             if (this.state === this.pending) {
61                 this.tasklist.push(obj);
62             }
63             //返回一个promise,支持链式调用
64             return this;
65         };
66 
67         //最终执行的方法,不管mypromise的状态如何
68         mypromise.prototype.finally = function(callback) {
69             this.finallycallback = callback;
70         };

  测试代码:

 var cc = new mypromise(function(reslove, reject) {
            settimeout(function() {
                reslove(2);
            }, 500);
        });
        var dd = new mypromise(function(reslove, reject) {
            settimeout(function() {
                reject(3);
            }, 500);
        });
        cc.then(function(num) {
                console.log(num);
                return dd;
            })
            .then(
                function(cc) {
                    console.log(cc);
                },
                function(e) {
                    console.log(5);
                }
            )
            .finally(function() {
                console.log("game over");
            });
        console.log(1);

  执行结果:

  手动实现Promise

   实现过程简单粗暴,如有问题,烦请指出,谢谢!