如果不采用异步方式,那么同时采用定时功能,数据会同时输出:
setTimeout(function (){
console.log('Frist')}, 2000)
setTimeout(function (){
console.log('Second')}, 2000)
setTimeout(function (){
console.log('Third')}, 2000)
结果:
两秒之后,同时输出:
Frist
Second
Third
setTimeout(function (){
console.log('Frist')
setTimeout(function (){
console.log('Second')
setTimeout(function (){
console.log('Thirt')
},2000)
}, 2000)
}, 2000)
结果:依次间隔两秒输出
Frist
Second
Third
const resolver = (msg, timeout) => new Promise((resolve) => {
console.log(msg);
setTimeout(resolve, timeout);
});
resolver('First', 500)
.then(() => resolver('Second', 2000))
.then(() => resolver('Third', 2000))
.then(() => resolver('Fourth', 2000));
结果:依次间隔两秒输出(用写同步的语言书写异步的操作)
Frist
Second
Third
const resolver = (msg, timeout) => new Promise((resolve) => {
console.log(msg);
setTimeout(resolve, timeout);
});
async function run() {
await resolver('First', 2000);
await resolver('Second', 2000);
await resolver('Third', 2000);
await resolver('Fourth', 2000);
}
run();
结果:依次间隔两秒输出(用写同步的语言书写异步的操作)
Frist
Second
Third
易错点:事件循环问题:
async function fn1 (){
console.log(1)
await fn2() // fn2进入微任务队列等待执行
console.log(2) // 阻塞
}
async function fn2 (){
console.log('fn2')
}
fn1()
console.log(3)
// 输出结果:1,fn2,3,2
async function fn1 (){
console.log(1)
await fn2() // fn2进入微任务队列等待执行
await fn3() // fn3进入微任务队列等待执行
console.log(2) // 阻塞
console.log(3) // 阻塞
}
async function fn2 (){
console.log('fn2')
}
console.log(4)
async function fn3 (){
console.log('fn3')
}
fn1()
console.log(3)
console.log(4)
// 输出结果:1,4, fn2,3,4 ,fn3,2,3
结果:
4,1, fn2,3,4 ,fn3,2,3
重点参考文章
1. 极速上手TypeScript」TypeScript之Promise
2. 理解异步函数async和await的用法