promise应用示例讲解

来源：互联网发布：淘宝怎么做虚拟产品编辑：程序博客网时间：2024/06/08 15:51

Q：红灯三秒亮一次，绿灯一秒亮一次，黄灯2秒亮一次；如何让三个灯不断交替重复亮灯？（用Promse实现）三个亮灯函数已经存在：

functionred(){
    console.log('red');
}
functiongreen(){
    console.log('green');
}
functionyellow(){
    console.log('yellow');
}

这道题首先考察Promise的应用，Promise的详细说明请看我的这篇文章：闲话Promise机制。首先我们需要一个函数来实现时间控制：

vartic = function(timmer,cb){
    returnnewPromise(function(resolve,reject){
        setTimeout(function(){
            cb();
            resolve();
        },timmer);
    });
};

如果把问题简化一下，如果只需要一个周期，那么利用Promise应该这样写：

vard = newPromise(function(resolve,reject){resolve();});
varstep = function(def){
    def.then(function(){
        returntic(3000,red);
    }).then(function(){
        returntic(2000,green);
    }).then(function(){
        returntic(1000,yellow);
    });
}

现在一个周期已经有了，剩下的问题是如何让他无限循环。说道循环很容易想到for while do-while这三个，比如：

vard = newPromise(function(resolve,reject){resolve();});
varstep = function(def){
    while(true){
        def.then(function(){
            returntic(3000,red);
        }).then(function(){
            returntic(2000,green);
        }).then(function(){
            returntic(1000,yellow);
        });
    }
}

如果你是这样想的，那么恭喜你成功踩了坑！这道题的第二个考查点就是setTimeout相关的异步队列会挂起知道主进程空闲。如果使用while无限循环，主进程永远不会空闲，setTimeout的函数永远不会执行！

正确的解决方法就是这道题的第三个考查点——递归！！！解决方案如下：

vard = newPromise(function(resolve,reject){resolve();});
varstep = function(def){
    def.then(function(){
        returntic(3000,red);
    }).then(function(){
        returntic(2000,green);
    }).then(function(){
        returntic(1000,yellow);
    }).then(function(){
        step(def);
    });
}

整体代码如下：

functionred(){
    console.log('red');
}
functiongreen(){
    console.log('green');
}
functionyellow(){
    console.log('yellow');
}

vartic = function(timmer,cb){
    returnnewPromise(function(resolve,reject){
        setTimeout(function(){
            cb();
            resolve();
        },timmer);
    });
};

vard = newPromise(function(resolve,reject){resolve();});
varstep = function(def){
    def.then(function(){
        returntic(3000,red);
    }).then(function(){
        returntic(2000,green);
    }).then(function(){
        returntic(1000,yellow);
    }).then(function(){
        step(def);
    });
}

step(d);

同时可以看到虽然Promise可以用来解决回调地狱问题，但是仍然不可避免的会有回调出现，更好的解决方案是利用Generator来减少回调:

vartic = function(timmer,str){
    returnnewPromise(function(resolve,reject){
        setTimeout(function(){
            console.log(str);
            resolve(1);
        },timmer);
    });
};

function *gen(){
    yield tic(3000,'red');
    yield tic(1000,'green');
    yield tic(2000,'yellow');
}

variterator = gen();
varstep = function(gen,iterator){
    vars = iterator.next();
    if(s.done){
        step(gen,gen());
    }else{
        s.value.then(function(){
            step(gen,iterator);
        });
    }
}

step(gen,iterator);

0 0