es6 异步并行和串行和用法

1.异步用法

 //此处假设是网络请求  这个网络请求的效果就是 翻倍数值
 function async(num) {
    return new Promise((resolve, reject)=>{
      if(1){
        setTimeout(()=>{
          resolve(num * 2)
        },500);
      } else {
        reject('失败')
      }
    })
  }
 // 传入参数2 调用网路请求
   async(2).then((res)=>{
    console.log(res,'value2 --- res')
  })

打印值如下
在这里插入图片描述

可以看到 能得到正常结果可是 如果数字很多呢
比如 我有个数组

let arr = [2, 3, 4, 5, 6, 7, 8, 9]
// 此处可以循环调用
let resArr = [];
async function getResolve() {
    try {
      for(let i = 0; i < arr.length;i++){
      // 此处我们做的是异步发出请求 因为await顾名思义就是等待 这是串行翻出请求
        let num = await async(arr[i]);
        resArr.push(num);
      }
      console.log(resArr)
    } catch (e) {
    }
  }
   getResolve()

4秒后打印值
在这里插入图片描述
如果说只是需要求值 并没有互相依赖的关系 可以写成这样

let arr = [2, 3, 4, 5, 6, 7, 8, 9]
// 此处可以循环调用
let resArr = [];
  async function getResolve() {
    try {
    // 此处可以看出 我们是同步发出请求 当我们取值的时候使用了await 这样的话就保证了我们取到的值是异步返回的结果 这是并行
      let resolve = arr.map((item)=>{
        return async(item)
      })
      for(data of resolve){
        resArr.push(await data)
      }
      console.log(resArr,'resArr')
    } catch (e) {

    }
  }
   getResolve()

此时会在0.5s后给出如下结果
es6 异步并行和串行和用法_第1张图片
就是说这里数并行请求 同时发出请求 等到结果 再排序 和明显 如果多个网络请求没有相互依赖关系可以写成这样 更加节省时间

//-------当然如果是确定数量的网络请求也可以用Promise--------------
 	Promise.all([asyncFunc1(),asyncFunc2(),等等 ]).then((res)=>{
		// 此处返回值为一个数组 对应顺序不变 [resolve1,resolve2,等等]   
       	console.log(res) 
    })
// 或者我们继续用es6方法
async function asyncTest() {
// 下面的是并行发出
    let resolve1 = asyncFunc1()
    let resolve2 = asyncFunc2()
    // 被注释的是串行发出
   	// let resolve1 = await asyncFunc1()
    // let resolve2 = await asyncFunc2()
   console.log(await test1)
   console.log(await test2)
  }

能力有限 对此也是一知半解 不过上述代码都是亲测 仅供参考 错误之处 欢迎大家指出 共同讨论

你可能感兴趣的:(学习笔记,前端,js)