es7 async、await定义异步函数执行同步操作

神奇大叔

已于 2022-06-03 10:36:38 修改

阅读量937

点赞数 1

分类专栏： es5、es6、es7 网页制作案例文章标签： es7

于 2020-02-05 22:11:01 首次发布

本文链接：https://blog.csdn.net/weixin_43294560/article/details/104189466

版权

网页制作案例同时被 2 个专栏收录

41 篇文章 3 订阅

订阅专栏

es5、es6、es7

13 篇文章 3 订阅

订阅专栏

ES7 async定义函数

	1、可以在不阻塞主线程的情况下,使用同步代码实现异步访问资源的能力,让我们的代码逻辑更清晰
	2、await Promise.resolve(内容)；  返回值为resolve的参数；reject(内容)函数调用会报错,内容为reject中的参数		
	
	语法:
		async function 函数名()
		{
			await 异步操作
			await 异步操作
		}
		
	async:
		使得修饰的函数返回值为一个Promise对象,返回的Promise对象的结果和状态由函数返回值决定,同.then返回效果相同
		
	await:
		(1)await 后面不是Promise会直接返回，不会阻塞线程
		(2)必须在async函数中使用,而async函数中不一定需要await
		(3)只能获取成功状态的Promise结果,失败状态需要try-catch捕捉
		
		await Promise对象; 返回Promise对象的成功状态的值
		await 普通值;	   返回普通值

代码示例:
html文件:

<html ng-app='app' ng-controller='main' >
<head>
	<meta charset="utf-8">
	<meta name='viewport' content='width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0'>

	<script src='jq/jquery-3.4.1.js'></script>

	<style>

	</style>
</head>
<body >


<script>
	async function fun()
	{
		return new Promise(resolve=>{
			setTimeout(resolve,2000);
		})

	}

	async function fun2()
	{
		console.log('开始',new Date().toTimeString());
		await fun();
		//会两秒后再打印
		console.log('结束',new Date().toTimeString());
	}

	fun2();

	function fun4()
	{
		return 'jeff';
	}

	async function fun3()
	{
		let res=await fun4();
		let res2=await Promise.resolve('promise')
		console.log(res);
		console.log(res2);
	}
	fun3();


//发送ajax请求
	async function getNews(url)
	{
		return new Promise((resolve,reject)=>{

		$.ajax({
			method:'GET',
			url:url,
			dataType:'json',
			success:function(res)
			{
				resolve(res);
			}

		})
	 })
	}

	async function sendXml()
	{
		let res=await getNews('http://localhost:3000/news?id=2');
		console.log(res);

		let res2=await getNews('http://localhost:3000'+res.commentsUrl);
		console.log(res2);

	}

	sendXml();

</script>
</body>
</html>