脚本宝典收集整理的这篇文章主要介绍了

实现简易 ES6 Promise 功能 (一)

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

Promise 对象用于延迟(deferred) 计算和异步(asynchronous ) 计算。一个Promise对象代表着一个还未完成,但预期将来会完成的操作。

先来一个例子 A 熟悉下语法

    var p = new Promise(function(resolve, reject){
        console.log('1');
        // 运行后续的 callback 列表,例如:then,when等。否则,不会执行then里面的函数
        resolve('go next'); 
    });
    
    // 只考虑成功
    p.then(function(){
        console.log(2, arguments);
        return 'next';
    }, null).then(function(){
        console.log(3, arguments)
    }, null);
    
    // 输出
    1
    2 ['go next']
    3 ['next']

最初的设想

    function Promise(func){ // 接收一个函数作为参数
    
    }
    
    Promise.prototype = {
    
        then: function(callback){ // 接收函数作为参数
            
            return this; // 支持链式调用
        }
    } 

观察例 A,resolve是一个函数,并且不是用户传的,所有Promise自身应该有一个resolve方法,并且这个方法要传递给Promise构造器里面的函数作为参数。

    function Promise(func){ // 接收一个函数作为参数
        **func(this.resolve);**
    }
    
    Promise.prototype = {
        
        **resolve: function(){
        
        }**,
        
        then: function(callback){ // 接收函数作为参数
            
            return this; // 支持链式调用
        }
    }

Promise是按照顺序来执行callback的,并且由resolve触发。

    function Promise(func){ // 接收一个函数作为参数
        **this.doneList = []; // callback 列表**
        **func(this.resolve.bind(this)); // 顺带绑定this对象**
    }
    
    Promise.prototype = {
        
        resolve: function(){
            **//执行回调列表
            while(true){
                if( this.doneList.length === 0 ){
                    break;
                }
                this.doneList.shift().apply(this);
            }**
        },
        
        then: function(callback){ // 接收函数作为参数
            **this.doneList.push(callback); // 加入到回调队列**
            return this; // 支持链式调用
        }
    }

好,现在写一个测试用例

    var p =new Promise(function(resolve){
            console.log('a');
            resolve();
        }).then(function(){
            console.log('b');
        });
        
     // 输出
     'a'

什么鬼?打印下p

    console.log(p);

图片描述

我们发现原来doneList里面还有一个函数没有运行,再运行下这个函数

    p.doneList[0].call(this);
    
    //结果
    console.log('b'); // 打印 b

打断点跟踪,发现Promise先执行resolve方法,然后执行then,把函数push到doneList。但是,再也没有执行过doneList里面的函数了。怎么办呢?我们可以给Promise加一个属性(state)来描述当前状态,分为【未完成】(pending)和【完成】(done)。如果执行then时,状态已经是完成态,那么切换到未完成态,并执行resolve方法。

    function Promise(func){ // 接收一个函数作为参数
        **this.state = 'pending'; // 初始化状态**
        this.doneList = []; // callback 列表
        func(this.resolve.bind(this)); // 顺带绑定this对象
    }
    
    Promise.prototype = {
        
        resolve: function(){
            //执行回调列表
            while(true){
                if( this.doneList.length === 0 ){
                    **this.state = 'done'; // 回调列表为空,改变状态**
                    break;
                }
                this.doneList.shift().apply(this);
            }
        },
        
        then: function(callback){ // 也是接收函数
            this.doneList.push(callback); // 加入到回调队列
            
            if( this.state === 'done'){
                this.state = 'pneding';
                this.resolve();
            }
            
            return this; // 支持链式调用
        }
    }

用和上面类似的例子再次测试

    var p =new Promise(function(resolve){
            console.log('a');
            resolve();
        }).then(function(){
            console.log('b');
        }).then(function(){
            console.log('c');
        });

结果截图
图片描述

这下,我们自定义的Promise基础功能完成了最核心的部分了。也许有人会疑问,你这写的什么鬼?下面的代码更简单,也能实现相同的功能

    function Promise(func){ // 接收一个函数作为参数
   
        func(this.resolve.bind(this)); // 顺带绑定this对象
    }
    
    Promise.prototype = {
        
        resolve: function(){
            //什么也不干    
        },
        
        then: function(callback){ // 也是接收函数
            callback.call(this); // 直接运行
            return this; // 支持链式调用
        }
    }

测试用例

    var p =new Promise(function(resolve){
            console.log('d');
            resolve();
        }).then(function(){
            console.log('e');
        }).then(function(){
            console.log('f');
        });

结果:
图片描述

但是,文章最前面说过

Promise 对象用于延迟(deferred) 计算和异步(asynchronous ) 计算

并且会顺序执行回调列表(doneList)。最终代码及测试

   function Promise(func){
        this.state = 'pending';
        this.doneList = []; 
        func(this.resolve.bind(this)); 
    }

    Promise.prototype = {
        
        resolve: function(){
            while(true){
                if( this.doneList.length === 0 ){
                    this.state = 'done';
                    break;
                }
                this.doneList.shift().apply(this);
            }
        },
        
        then: function(callback){ 
            this.doneList.push(callback); 
            if( this.state === 'done'){
                this.state = 'pending';
                this.resolve();
            }
            return this; 
        }
    }

    var p = new Promise(function(resolve){
            window.setTimeout(function(){
                console.log('d');
                resolve();
            }, 1000);
        }).then(function(){
            console.log('e');
        }).then(function(){
            console.log('f');
        });

    console.log('被阻塞了吗?');

输出:
图片描述

先输出'被阻塞了吗?',一秒钟后相继输出 d、e、f 。可以看出,不但没有阻塞后面的代码执行,而且回调也是按照顺序执行的。

结束。

下篇继续完善,例如数据传递以及then中函数返回一个Promise时,如何处理。欢迎大家有疑问或者建议,一起来交流。

总结

以上是脚本宝典为你收集整理的

实现简易 ES6 Promise 功能 (一)

全部内容,希望文章能够帮你解决

实现简易 ES6 Promise 功能 (一)

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过