今天讨论问题,涉及到了多个await执行顺序的问题,折腾了半个多小时终于弄懂了。
下边是个简单的代码:
function test1() {
console.log(111);
}
function test2() {
console.log(222);
}
async function test3() {
await test1();
await test2();
}
test3();
这个执行起来很容易理解,输出结果为111、222。
那么下边改造一下:
function test1() {
setTimeout( ()=> {
console.log(111);
}, 1000);
}
function test2() {
console.log(222);
}
async function test3() {
await test1();
await test2();
}
test3();
输出的结果为222、111。那么问题来了,为什么会造成这样的结果?如果我们想要让执行顺序依然为111、222怎么做?
在和小伙伴们讨论多时,群里边发来一篇文章,上边写到:

那么谜底揭晓,原来await等待的东西分两种情况,promise和非promise,遇到promise会阻塞下边的代码,遇到非promise的会直接根据情况进行执行。
所以最终我们又改造了一下代码:
function test1() {
return new Promise(resolve => {
setTimeout(() => {
console.log(111);
resolve();
}, 2000)
})
}
function test2(res) {
setTimeout(() => {
console.log(222);
}, 1000);
}
async function test3() {
await test1();
await test2();
}
test3();
最终输出111、222,代码的执行顺序如下:
执行test3(),执行test1(),遇到promise,阻塞代码,此时test2()不执行,运行test1(),等待2s,输出111,运行resolve(),执行test2(),等待1s,输出222。
本文探讨了JavaScript中await关键字的使用,特别是在处理异步操作时的执行顺序。通过示例代码解释了当await等待的是Promise和非Promise时的区别,以及如何确保代码按预期顺序执行。通过改造代码,使异步函数返回Promise并调整setTimeout,最终实现了期望的111、222输出顺序。理解async/await的关键在于它如何与Promise配合工作,以控制异步流程。
1330

被折叠的 条评论
为什么被折叠?



