多个await的执行顺序?

今天讨论问题,涉及到了多个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 的 async/await

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值