1. 随笔博客首页
  2. JavaScript

JS 中for循环中异步变为同步的使用

五维国度 • 文章来源: JS 中for循环中异步变为同步的使用 • • JavaScript • 阅读 64

知识点：

在项目中有些逻辑或者请求依赖另一个异步请求，大家常用的方法是回调函数。现在有个高大上的解决方案：await async 。

async 是“异步”的简写，而 await 可以认为是 async wait 的简写。所以应该很好理解 async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成。并且await 只能出现在 async 函数中，否则会报错。

async作用：

当调用一个 async 函数时，会返回一个 Promise 对象。当这个 async 函数返回一个值时，Promise 的 resolve 方法会负责传递这个值；当 async 函数抛出异常时，Promise 的 reject 方法也会传递这个异常值。

async 函数中可能会有 await 表达式，这会使 async 函数暂停执行，等待 Promise  的结果出来，然后恢复async函数的执行并返回解析值（resolved）。

await作用：

await 表达式会暂停当前 async function 的执行，等待 Promise 处理完成。若 Promise 正常处理(fulfilled)，其回调的resolve函数参数作为 await 表达式的值，继续执行 async function。

若 Promise 处理异常(rejected)，await 表达式会把 Promise 的异常原因抛出。另外，如果 await 操作符后的表达式的值不是一个 Promise，则返回该值本身。

场景：For循环中异步AJAX查询返回数据

代码如下：


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>异步变同步</title>
</head>
<body>
		测试异步变同步
</body>
</html>
<!-- jQuery -->
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
	
test(0,20);
	
//在for循环中调用异步方法
async function test(offset, limit){
	for(var i=0;i<5;i++){
		await asyncTree(offset, limit, i);
	}
}
 
//通过异步获取Tree数据(id=1-5 5条数据)
function asyncTree(offset, limit, number){
	return new Promise(function(resolve, reject) {
		$.ajax({
			type : 'POST',
  			url : "/system/tree_list",
  			data : {"offset" : offset, "limit" : limit},
  			dataType : "json",
  			success: function(result){
  				var code = result.code;
  				if(code == 0){
  					var data = result.data;
  					data.forEach(function(element, index){
  						console.log("循环=" + number + "--" + index + ":" + encapsulationData(element));
  					});
  				}
  				resolve();
  			}
		});
	});
}
 
//将数据封装为对象数组({经度 纬度 名称 状态})
function encapsulationData(data){
	var obj = {lng:data.longitude, lat:data.latitude, name:data.name, state:data.state};
	return JSON.stringify(obj)
}
 
/*]]>*/
</script>

将test这个方法定义为异步方法，当里面的asyncTree方法执行完毕后才会进入下一次循环

模拟异步查询20条数据，每次异步完成后输出这20条数据，和是第几次循环

控制台输出如下


sync:39 循环=0--0:{"lng":116.3741370115967,"lat":39.90762965106183,"name":"p1","state":1}
sync:39 循环=0--1:{"lng":116.3841370115967,"lat":39.90795884517671,"name":"p2","state":1}
sync:39 循环=0--2:{"lng":116.3941370115967,"lat":39.90743213383357,"name":"p3","state":0}
sync:39 循环=0--3:{"lng":116.4041370115967,"lat":39.90789300648029,"name":"p4","state":1}
sync:39 循环=0--4:{"lng":116.4141370115967,"lat":39.90795884517671,"name":"p5","state":0}
sync:39 循环=0--5:{"lng":116.4241370115967,"lat":39.90795884517671,"name":"p6","state":1}
sync:39 循环=0--6:{"lng":116.4341370115967,"lat":39.90795884517671,"name":"p7","state":1}
sync:39 循环=0--7:{"lng":116.4441370115967,"lat":39.90795884517671,"name":"p8","state":1}
sync:39 循环=0--8:{"lng":116.4541370115967,"lat":39.90795884517671,"name":"p9","state":1}
sync:39 循环=0--9:{"lng":116.4641370115967,"lat":39.90795884517671,"name":"p10","state":1}
sync:39 循环=0--10:{"lng":116.3741370115967,"lat":39.91795884517671,"name":"p11","state":1}
sync:39 循环=0--11:{"lng":116.3841370115967,"lat":39.91795884517671,"name":"p12","state":1}
sync:39 循环=0--12:{"lng":116.3941370115967,"lat":39.91795884517671,"name":"p13","state":0}
sync:39 循环=0--13:{"lng":116.4041370115967,"lat":39.91795884517671,"name":"p14","state":1}
sync:39 循环=0--14:{"lng":116.41413701159672,"lat":39.91795884517671,"name":"p15","state":1}
sync:39 循环=0--15:{"lng":116.42413701159671,"lat":39.91795884517671,"name":"p16","state":1}
sync:39 循环=0--16:{"lng":116.4341370115967,"lat":39.91795884517671,"name":"p17","state":1}
sync:39 循环=0--17:{"lng":116.44413701159671,"lat":39.91795884517671,"name":"p18","state":1}
sync:39 循环=0--18:{"lng":116.45413701159671,"lat":39.91795884517671,"name":"p19","state":1}
sync:39 循环=0--19:{"lng":116.4641370115967,"lat":39.91795884517671,"name":"p20","state":1}
sync:39 循环=1--0:{"lng":116.3741370115967,"lat":39.90762965106183,"name":"p1","state":1}
sync:39 循环=1--1:{"lng":116.3841370115967,"lat":39.90795884517671,"name":"p2","state":1}
sync:39 循环=1--2:{"lng":116.3941370115967,"lat":39.90743213383357,"name":"p3","state":0}
sync:39 循环=1--3:{"lng":116.4041370115967,"lat":39.90789300648029,"name":"p4","state":1}
sync:39 循环=1--4:{"lng":116.4141370115967,"lat":39.90795884517671,"name":"p5","state":0}
sync:39 循环=1--5:{"lng":116.4241370115967,"lat":39.90795884517671,"name":"p6","state":1}
sync:39 循环=1--6:{"lng":116.4341370115967,"lat":39.90795884517671,"name":"p7","state":1}
sync:39 循环=1--7:{"lng":116.4441370115967,"lat":39.90795884517671,"name":"p8","state":1}
sync:39 循环=1--8:{"lng":116.4541370115967,"lat":39.90795884517671,"name":"p9","state":1}
sync:39 循环=1--9:{"lng":116.4641370115967,"lat":39.90795884517671,"name":"p10","state":1}
sync:39 循环=1--10:{"lng":116.3741370115967,"lat":39.91795884517671,"name":"p11","state":1}
sync:39 循环=1--11:{"lng":116.3841370115967,"lat":39.91795884517671,"name":"p12","state":1}
sync:39 循环=1--12:{"lng":116.3941370115967,"lat":39.91795884517671,"name":"p13","state":0}
sync:39 循环=1--13:{"lng":116.4041370115967,"lat":39.91795884517671,"name":"p14","state":1}
sync:39 循环=1--14:{"lng":116.41413701159672,"lat":39.91795884517671,"name":"p15","state":1}
sync:39 循环=1--15:{"lng":116.42413701159671,"lat":39.91795884517671,"name":"p16","state":1}
sync:39 循环=1--16:{"lng":116.4341370115967,"lat":39.91795884517671,"name":"p17","state":1}
sync:39 循环=1--17:{"lng":116.44413701159671,"lat":39.91795884517671,"name":"p18","state":1}
sync:39 循环=1--18:{"lng":116.45413701159671,"lat":39.91795884517671,"name":"p19","state":1}
sync:39 循环=1--19:{"lng":116.4641370115967,"lat":39.91795884517671,"name":"p20","state":1}
sync:39 循环=2--0:{"lng":116.3741370115967,"lat":39.90762965106183,"name":"p1","state":1}
sync:39 循环=2--1:{"lng":116.3841370115967,"lat":39.90795884517671,"name":"p2","state":1}
sync:39 循环=2--2:{"lng":116.3941370115967,"lat":39.90743213383357,"name":"p3","state":0}
sync:39 循环=2--3:{"lng":116.4041370115967,"lat":39.90789300648029,"name":"p4","state":1}
sync:39 循环=2--4:{"lng":116.4141370115967,"lat":39.90795884517671,"name":"p5","state":0}
sync:39 循环=2--5:{"lng":116.4241370115967,"lat":39.90795884517671,"name":"p6","state":1}
sync:39 循环=2--6:{"lng":116.4341370115967,"lat":39.90795884517671,"name":"p7","state":1}
sync:39 循环=2--7:{"lng":116.4441370115967,"lat":39.90795884517671,"name":"p8","state":1}
sync:39 循环=2--8:{"lng":116.4541370115967,"lat":39.90795884517671,"name":"p9","state":1}
sync:39 循环=2--9:{"lng":116.4641370115967,"lat":39.90795884517671,"name":"p10","state":1}
sync:39 循环=2--10:{"lng":116.3741370115967,"lat":39.91795884517671,"name":"p11","state":1}
sync:39 循环=2--11:{"lng":116.3841370115967,"lat":39.91795884517671,"name":"p12","state":1}
sync:39 循环=2--12:{"lng":116.3941370115967,"lat":39.91795884517671,"name":"p13","state":0}
sync:39 循环=2--13:{"lng":116.4041370115967,"lat":39.91795884517671,"name":"p14","state":1}
sync:39 循环=2--14:{"lng":116.41413701159672,"lat":39.91795884517671,"name":"p15","state":1}
sync:39 循环=2--15:{"lng":116.42413701159671,"lat":39.91795884517671,"name":"p16","state":1}
sync:39 循环=2--16:{"lng":116.4341370115967,"lat":39.91795884517671,"name":"p17","state":1}
sync:39 循环=2--17:{"lng":116.44413701159671,"lat":39.91795884517671,"name":"p18","state":1}
sync:39 循环=2--18:{"lng":116.45413701159671,"lat":39.91795884517671,"name":"p19","state":1}
sync:39 循环=2--19:{"lng":116.4641370115967,"lat":39.91795884517671,"name":"p20","state":1}
sync:39 循环=3--0:{"lng":116.3741370115967,"lat":39.90762965106183,"name":"p1","state":1}
sync:39 循环=3--1:{"lng":116.3841370115967,"lat":39.90795884517671,"name":"p2","state":1}
sync:39 循环=3--2:{"lng":116.3941370115967,"lat":39.90743213383357,"name":"p3","state":0}
sync:39 循环=3--3:{"lng":116.4041370115967,"lat":39.90789300648029,"name":"p4","state":1}
sync:39 循环=3--4:{"lng":116.4141370115967,"lat":39.90795884517671,"name":"p5","state":0}
sync:39 循环=3--5:{"lng":116.4241370115967,"lat":39.90795884517671,"name":"p6","state":1}
sync:39 循环=3--6:{"lng":116.4341370115967,"lat":39.90795884517671,"name":"p7","state":1}
sync:39 循环=3--7:{"lng":116.4441370115967,"lat":39.90795884517671,"name":"p8","state":1}
sync:39 循环=3--8:{"lng":116.4541370115967,"lat":39.90795884517671,"name":"p9","state":1}
sync:39 循环=3--9:{"lng":116.4641370115967,"lat":39.90795884517671,"name":"p10","state":1}
sync:39 循环=3--10:{"lng":116.3741370115967,"lat":39.91795884517671,"name":"p11","state":1}
sync:39 循环=3--11:{"lng":116.3841370115967,"lat":39.91795884517671,"name":"p12","state":1}
sync:39 循环=3--12:{"lng":116.3941370115967,"lat":39.91795884517671,"name":"p13","state":0}
sync:39 循环=3--13:{"lng":116.4041370115967,"lat":39.91795884517671,"name":"p14","state":1}
sync:39 循环=3--14:{"lng":116.41413701159672,"lat":39.91795884517671,"name":"p15","state":1}
sync:39 循环=3--15:{"lng":116.42413701159671,"lat":39.91795884517671,"name":"p16","state":1}
sync:39 循环=3--16:{"lng":116.4341370115967,"lat":39.91795884517671,"name":"p17","state":1}
sync:39 循环=3--17:{"lng":116.44413701159671,"lat":39.91795884517671,"name":"p18","state":1}
sync:39 循环=3--18:{"lng":116.45413701159671,"lat":39.91795884517671,"name":"p19","state":1}
sync:39 循环=3--19:{"lng":116.4641370115967,"lat":39.91795884517671,"name":"p20","state":1}
sync:39 循环=4--0:{"lng":116.3741370115967,"lat":39.90762965106183,"name":"p1","state":1}
sync:39 循环=4--1:{"lng":116.3841370115967,"lat":39.90795884517671,"name":"p2","state":1}
sync:39 循环=4--2:{"lng":116.3941370115967,"lat":39.90743213383357,"name":"p3","state":0}
sync:39 循环=4--3:{"lng":116.4041370115967,"lat":39.90789300648029,"name":"p4","state":1}
sync:39 循环=4--4:{"lng":116.4141370115967,"lat":39.90795884517671,"name":"p5","state":0}
sync:39 循环=4--5:{"lng":116.4241370115967,"lat":39.90795884517671,"name":"p6","state":1}
sync:39 循环=4--6:{"lng":116.4341370115967,"lat":39.90795884517671,"name":"p7","state":1}
sync:39 循环=4--7:{"lng":116.4441370115967,"lat":39.90795884517671,"name":"p8","state":1}
sync:39 循环=4--8:{"lng":116.4541370115967,"lat":39.90795884517671,"name":"p9","state":1}
sync:39 循环=4--9:{"lng":116.4641370115967,"lat":39.90795884517671,"name":"p10","state":1}
sync:39 循环=4--10:{"lng":116.3741370115967,"lat":39.91795884517671,"name":"p11","state":1}
sync:39 循环=4--11:{"lng":116.3841370115967,"lat":39.91795884517671,"name":"p12","state":1}
sync:39 循环=4--12:{"lng":116.3941370115967,"lat":39.91795884517671,"name":"p13","state":0}
sync:39 循环=4--13:{"lng":116.4041370115967,"lat":39.91795884517671,"name":"p14","state":1}
sync:39 循环=4--14:{"lng":116.41413701159672,"lat":39.91795884517671,"name":"p15","state":1}
sync:39 循环=4--15:{"lng":116.42413701159671,"lat":39.91795884517671,"name":"p16","state":1}
sync:39 循环=4--16:{"lng":116.4341370115967,"lat":39.91795884517671,"name":"p17","state":1}
sync:39 循环=4--17:{"lng":116.44413701159671,"lat":39.91795884517671,"name":"p18","state":1}
sync:39 循环=4--18:{"lng":116.45413701159671,"lat":39.91795884517671,"name":"p19","state":1}
sync:39 循环=4--19:{"lng":116.4641370115967,"lat":39.91795884517671,"name":"p20","state":1}

场景2：若异步操作中的数据有一定的顺序关系则实例代码如下

每次异步查询10条数据  最后将这10条数据放入数组中，有序


<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
//场景2 
var offset = 0;
limit = 10;
box5();
 
async function box5() {
    var arr = [];
    for (var i = 0; i < 9; i++) {
    	console.log("index: " + i);
        await asyncTree2(i * limit, limit, arr);
    }
    console.log(arr);
}
 
//通过异步获取Tree数据
function asyncTree2(offset, limit, arr){
	return new Promise(function(resolve, reject) {
		$.ajax({
			type : 'POST',
			url : "/system/tree_list",
			data : {"offset" : offset, "limit" : limit},
			dataType : "json",
			success: function(result){
				var code = result.code;
				if(code == 0){
					var data = result.data;
					data.forEach(function(element, index){
						arr.push(element);	
					});
				}
				resolve();
			}
		});
	});
}
/*]]>*/
</script>

控制台输出：

JS 中for循环中异步变为同步的使用

共计90条数据

这样就将异步转为同步了

本文来自转载，文章内容不代表随笔博客立场。
原文链接：JS 中for循环中异步变为同步的使用
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
赞 (0)
五维国度的头像五维国度
0 0 打赏 微信扫一扫 微信扫一扫
上一篇 2023年 6月 30日 上午10:32
下一篇 2023年 7月 21日 下午7:29

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

联系我们

在线咨询： QQ交谈

邮件：jctestxcx@163.com

关注微信