asyn和await的简单介绍和使用

最新推荐文章于 2025-05-14 13:37:04 发布

xvzhengyang

最新推荐文章于 2025-05-14 13:37:04 发布

阅读量656

点赞数

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/xvzhengyang/article/details/106820761

本文详细解析了JavaScript中Async函数和Await关键字的工作原理，包括它们如何处理Promise对象，以及如何在实际编程中运用这些特性来优化异步操作的流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			// async是一个修饰符,它作为一个关键字放到函数前面 ; async 定义的函数会默认的返回一个Promise对象resolve的值;
			// 因此对async函数可以直接进行then操作, 返回的值即为then方法的传入函数
			async function example() {
				return 'this is an example';
			}
			example().then(msg => {
				console.log(`msg是${msg}`);
				// 将会输出 msg是this is an example
			})

			async function example2() {
				for (let index = 0; index < 3; index++) {
					console.log(index);
				}
			}
			console.log(example2());
			console.log('结束')
			// 结果如下
			// 0
			// 1
			// 2
			// Promise {<resolved>: undefined}
			// 结束
			// 根据结果可以看到,　如果async 函数执行完，返回的promise 没有注册回调函数,和普通函数执行没有区别,只不过在执行结束会返回一个promise 对象

			//  await 关键字只能放到async 函数里面，await是等待的意思;它等待的是promise 对象的执行完毕，并返回结果
			function test() {
				return new Promise((resolve, reject) => {
					setTimeout(function() {
						resolve(`2秒时间到,开始执行`)
					}, 2000);
				})
			}
			async function example3() {
				let test_msg = await test();
				console.log(`test_msg:${test_msg}`);
			}
			example3().then(msg => {
				console.log(`msg : ${msg}`);

			}).catch(err => {
				console.log(`err : ${err}`);

			})

			// 打印结果 (2秒后输出如下结果)
			// test_msg:2秒时间到,开始执行
            // msg : undefined
			// await 我们知道是等待的意思,当看到await,代码会暂停到这里，不再向下执行，它等待后面的promise对象执行完毕，然后拿到promise resolve 的值并进行返回，返回值拿到之后，它继续向下执行。
			// 例如上面的而例子,等待test()执行完毕,2秒后执行结束了,拿到了promise resolve 了,返回值"2秒时间到,开始执行";此时代码开始继续往下;
			
			
			// 这里强调一下await等待，当js等待promise resolve 的时候，它并没有真正的暂停工作，它仍然会处理其它的一些事情，如果我们在example3函数的调用后面加上console.log ,我们就会发现后面console.log的代码先执行。
			
			console.log(`我比example3还要先执行哦`);
			// ok,现在我们看下下面的例子
			function test1() {
				return new Promise((resolve, reject) => {
					setTimeout(() => {
						resolve('test1')
					}, 5000)
				})
			}

			function test2() {
				return new Promise((resolve, reject) => {
					setTimeout(() => {
						resolve('test2')
					}, 5000)
				})
			}

			function test3() {
				return new Promise((resolve, reject) => {
					setTimeout(() => {
						resolve('test3')
					}, 5000)
				})
			}
			async function run() {
				const first = await this.test1();
				console.log(first) ;
				const second = await this.test2();
				console.log(second) ;
				const third = await this.test3();
				console.log(third) ;
			}
			run();
			//  5s后输出test1
			// 10s后输出test2
			// 15s后输出test3
		</script>
	</body>
</html>