vue 如何在 for 循环里面使用异步调用 async/await

vue项目中如何在 for 循环里面使用异步调用 async/await

问题描述

在使用函数的async/await异步调用时候，放在正常函数中单个调用时没有问题的，但是await放在forEach()循环里面就会报错

async detailData (newVal) {
    
    
  newVal.forEach(line => {
    
    
    var list = await infoStore(line.id)
  })
}

报错 await is a reserved word

这是因为async和await必须成对出现，如果调用await的地方无法正确匹配到async则会报错，
forEach属于并发操作，在 forEach 循环内调用异步函数时，下一个循环并不会等到上个循环结束后再被调用，所以以上调用方式才会报错。

解决方案

以下将介绍forEach和其他循环中async/await异步调用方法

1. forEach 循环中处理

async detailData (newVal) {
    
    
  await Promise.all(
    newVal.forEach(async line => {
    
    
      var list = await infoStore(line.id)
    })
  )
}

2. for of 中处理

async detailData (newVal) {
    
    
  for (let item of newVal){
    
    
    var list = await infoStore(item.id)
  }
}

3. for 循环中处理

async detailData (newVal) {
    
    
  for (var i=0; i<newVal.length; i++) {
    
    
    var list = await infoStore(newVal[i].id)
  }
}

4. map 中处理

async detailData (newVal) {
    
    
  let list = newVal.map(async item => {
    
    
    return await infoStore(item.id)
  })
  // 这时候 list 拿到的值还是promise数据
  // 需要再使用promise.all()处理一下，最终listEnd就是Promise里面的数据
  let listEnd = await Promise.all(list)
}

以上是个人经验，希望对大家有所帮助！

如果对如何获取Promise对象中的PromiseResult中的数据还是不明白，为什么要用async/await异步调用方法来获取？可以参考另外一篇文章：
如何获取Promise对象中的PromiseResult中的数据