setTimeout、promise、async/await 实例代码对比及图解

setTimeout、promise、async/await 实例代码对比及图解

• 一、前言
• 二、实例代码
• • 2.1 setTimeout代码
  • 2.2 promise代码
  • 2.3 async/await 代码
• 三、执行效果
• 四、执行过程图解
• • 4.1 promise图解
  • 4.2 async/await 图解
• 五、总结

一、前言

setTimeout、promise、async/await 都是js的异步机制，对于三者的原理这里不多做介绍，本文从实用角度出发，用实例列出3中机制的代码，并且附上promise和async/await的执行流程图解，做一个横向对比；同时让读者可以“开箱即用”，在实际应用中，选择合适的的一种，直接copy代码，然后进行开发。

现在我们模拟一个需求：
实现每隔1秒执行异步事件：生成1-10随机数，如果大于5则输出成功，否则输出失败并终止程序，最多执行3次。

二、实例代码

2.1 setTimeout代码

        console.log("程序开始");
        //异步事件函数
        function action(times,callBack){
            let num = parseInt(Math.random()*10+1);
            if(num>5){
                console.log("第"+times+"次执行成功，"+num+">5为true");
                callBack();
            }else{
                console.log("程序终止，第"+times+"次执行失败，"+num+">=5为false");
            }
        }

        setTimeout(function(){
            action(1,function(){
                setTimeout(function(){
                    action(2,function(){
                        setTimeout(function(){
                            action(3,function(){
                                console.log("程序结束");
                            });
                        },1000)
                    });
                },1000)
            });
        },1000);

2.2 promise代码

    console.log("程序开始");
    //异步事件函数
    function action(times){
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                let num = parseInt(Math.random()*10+1);
                if(num>=5){
                    resolve("第"+times+"次执行成功，"+num+">=5为true");
                }else{
                    reject("程序终止，第"+times+"次执行失败，"+num+">=5为false");
                }
            },1000)
        })
    }

    action(1).then((result1)=>{
        console.log(result1);
        return action(2);
    }).then((result2)=>{
        console.log(result2);
        return action(3);
    }).then((result3)=>{
        console.log(result3);
        console.log("程序结束");
    }).catch((error)=>{
        console.log(error);
    });

2.3 async/await 代码

    console.log("程序开始");
    //异步事件函数
    function action(times){
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                let num = parseInt(Math.random()*10+1);
                if(num>=5){
                    resolve("第"+times+"次执行成功，"+num+">=5为true");
                }else{
                    reject("程序终止，第"+times+"次执行失败，"+num+">=5为false");
                }
            },1000)
        })
    }

    async function asy(){
        try{
            const result1 = await action(1);
            console.log(result1);
            const result2 = await action(2);
            console.log(result2);
            const result3 = await action(3);
            console.log(result3);
            console.log("程序结束");

        }catch(error){
            console.log(error);
        }
    }
    asy();

三、执行效果

四、执行过程图解

4.1 promise图解

4.2 async/await 图解

五、总结

从上面的代码和图解可以看出，从语法简洁流程理解上看，async/await > promise > setTimeout ，所以个人也推崇 async/await ，但是兼容性可能是一个问题，总之各区所需吧。