这个一个对ES6多个异步处理的并发继发思想的总结和理解

Posted 2022-12-07 xiujun

1.首先我们需要理解的是js中for循环、forEach循环、map循环的一些差异性，直接说了为后面说到的提供一些依据

　　1.1 for循环最基本，也是最容易理解的。

　　1.2 forEach和map用法类似，

　　相同点：

　　　　  都可以遍历到数组的每个元素，而且参数一致（数组中的当前项item,当前项的索引index,原始数组input）

　　不同点：

 　　　　 forEach() 方法对数组的每个元素执行一次提供的函数。总是返回undefined；

  　　　　map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。返回值是一个新的数组（但是不会改变原数组的）；

　　写法如下：

 1 var ary = [1,2,3,4,5];
 2 1.forEach()
 3 //无返回值，undefined
 4 ary.forEach(function(value,index,array)
 5 　　//do something
 6 ,this)
 7 
 8 2.map() 
 9 //有返回值，可以return 出来
11 ary.map(function(value,index,array)
12 　　//do something
13 　　return XXX
14 ,this)

 

2 现在我们开始理解多异步操作的思想，假设我们当前有这么一个场景：列表有五个页签，我们需要分别获取这五个页签的某些数据，并且依次按照顺序打印出来

　　2.1 获取某个页签的数据方法是一个异步的，这时候我们打算采用一个for循环

 1 async function UpdateClientCache()
 2       //debugger
 3       console.log(‘begin‘)
 4       console.log(new Date())
 5       let arrList = [1,2,3]
 6       let result = []
 7       for (const iterator of arrList) 
 8         result.push(await this.getLMxTableInfo(iterator))//getLMXTableInfo()是一个异步的操作
 9       
10       console.log(‘end‘)
11       console.log(result)
12       console.log(new Date())
13     ,
14 
15 //不难想象输出的result依次存放在异步操作每次返回的结果，且下一个异步操作getLMXTableInfo()的执行都是在上一次的返回后，及继发的关系

 

　　2.2 如果我们把上面的for-of循环改成forEach呢？如果改成map呢？

 1 UpdateClientCache()
 2       //debugger
 3       console.log(new Date())
 4       let arrList = [1,2,3]
 5       let result = []
 6       let promises = arrList.map((doc) =>common.getLMxTableInfo(doc));
 7       result = await Promise.all(promises);
 8       console.log(result)
 9       console.log(new Date())
10     ,

　　　　//实际上每次执行异步操作是并行，不依靠上次的返回值，节省操作时间，并且依次返回值（这里大家可以实际去操作，通过new sleep（）来调整异步时间比较，我的理解是异步操作还是等待的，只是同步的部分是并行的）

//foreachy也是同理的 我们可以有一个不同的写法，这个需要我们注意到forEach的一个特性：对数组的每个元素执行一次提供的函数，那么我们可以这样写

UpdateClientCache()
　　console.log(new Date())

　　let arrList = [1,2,3]
　　let result = []
　　
　　arrList.forEach(async function(doc)
　　　　result.push(await common.getLMXTableInfo(doc))
　　)

　　console.log(result)//当然是undefined
　　console.log(new Date())


//说明，这个应该是和上面的一样的，属于一种多异步并发的情况，因为forEach的每一次遍历都是重新提供一个函数的

相当于 let res1 = await common.getLMXTableInfo(1)

　　　 let res2 = await common.getLMXTableInfo(2)

　　　 let res3 = await common.getLMXTableInfo(3)

　　　 result.push()res1,res2,res3

　　这个我按照ES6讲解的async中的例子做了测试，有些地方还不太清楚具体原因，有些没有重现出减少耗时的现象，所以有些地方还是做保留，大家可以按照这种思想做一下测试，自定义一个异步函数，给出一个回调函数，测试时间可以用new sleep()

来造成阻塞以便实现时间的测试，也可以用这个例子：

　　

1 var now = new Date();
2 var exitTime = now.getTime() + 4000;//具体时间可以改，ms为单位
3 while (true) 
4   now = new Date();
5   if (now.getTime() > exitTime)
6       break;
7   
8 
 //就是一种前端等待的思想，可以包装成一个方法，参数是具体的毫秒