setTimeout、promise、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 ,但是兼容性可能是一个问题,总之各区所需吧。