关于 JS 中，实现在异步代码执行完毕再执行后续代码

最新推荐文章于 2025-03-27 17:51:39 发布

原创最新推荐文章于 2025-03-27 17:51:39 发布 · 2.1w 阅读

54 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

JavaScript 专栏收录该内容

10 篇文章

订阅专栏

本文讲解了JavaScript中同步与异步的区别，通过fn1函数示例展示如何使用Promise和async/await实现异步代码控制，让你理解在单线程环境中如何优雅地处理并发任务。

因为 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()