因为 js 是单线程，所有的同步任务要等前一个任务执行完毕，再执行下一个任务。

function fn1() {
	console.log("fn1")
	fn2()
	fn3()
}

function fn2() {
	console.time()
	for (let i = 0; i < 1000; i++) {
		console.log("fn2 repeat");
	}
	console.timeEnd()
}

function fn3() {
	console.log("fn3")
}
fn1()

但是异步任务并不是这样的。

function fn1() {
	console.log("fn1")
	fn2()
	fn3()
}

function fn2() {
	setTimeout(() => {
		console.log("fn2");
	}, 0);
}

function fn3() {
	console.log("fn3")
}
fn1()

使用 Promise 实现在异步代码执行完毕之后，在执行后续代码

function fn1() {
	console.log("fn1")
	fn2().then(() => {
		fn3()
	})
}

function fn2() {
	return new Promise(resolve => {
		setTimeout(() => {
			console.log("fn2");
			resolve()
		}, 1000);
	})
}

function fn3() {
	console.log("fn3")
}
fn1()

添加 async / await 美化 Promise

async function fn1() {
	console.log("fn1")
	await fn2()
	fn3()
}

function fn2() {
	return new Promise(resolve => {
		setTimeout(() => {
			console.log("fn2");
			resolve()
		}, 1000);
	})
}

function fn3() {
	console.log("fn3")
}
fn1()