Promise实现

作者: 古月丶 | 来源:发表于2019-07-04 09:51 被阅读0次
    function Promise(fn) { 
        var state = 'pending',
            value = '',
            callbacks = [];
     
        this.then = function(onfulfilled) {
            if(state === 'pending') {     // 判断状态,当执行过resolve,之后链式的then直接执行
                callbacks.push(onfulfilled);
                return this;
            }
            onfulfilled(value);
            return this;
        }
    
        function resolve(newValue) {
            value = newValue;
            state = 'fulfilled';
            callbacks.forEach(function(callback) {
                callback(value)
            })
        }
    
        fn(resolve)
    }
    

    上面代码存在一个问题,在then方法注册回调之前,resolve就已经执行了,为了保证注册回调在resolve之前执行,可以通过延时将resolve执行回调的方法放到执行队列队尾。

    function resolve(newValue) {
        value = newValue;
        state = 'fulfilled';
        setTimeout(function() {
            callbacks.forEach(function(callback) {
                callback(value)
            })
        })
    }
    
    var hcx = new Promise(function(resolve) {
        resolve(‘my name is hcx!’)
    }).then(function(result) {
        // do something
    })
    

    加入失败处理:

    function Promised(fn) {
        var callbacks = [],
            value = '',
            state = 'pending';
        this.then = function(onFulfilled, onReject) {
            return new Promised(function(resolve, reject) {
                handle({
                    onFulfilled: onFulfilled,
                    onReject: onReject,
                    resolve: resolve,
                    reject: reject
                })
            })
        }
        function handle(callback) {
            if(state === 'pending') {
                callbacks.push(callback);
                return;
            }
            var cb = state === 'fulfilled'? callback.onFulfilled: callback.onRejected;
            if(!cb) {
                cb = state === 'fulfilled'? callback.resolve: callback.reject;
                cb(value);
                return;
            }
            try {
                callback.resolve(cb(value));
            } catch(err) {
                 callback.reject(err);
            }
        }
        function resolve(data) {
            value = data;
            state = 'fulfilled';
            execute();
        }
        function reject(data) {
            value = data;
            state = 'rejected';
            execute();
        }
        function execute() {
            setTimeout(function() {
                for(var i = 0; i < callbacks.length; i++) {
                    handle(callbacks[i]);
                } 
            });
        }
        fn(resolve, reject);
    }
    

    相关文章

      网友评论

        本文标题:Promise实现

        本文链接:https://www.haomeiwen.com/subject/bkuchctx.html