vue在 for 循环里使用异步调用 async/await的方法
作者：TTong___
大家都遇到这样的问题,在使用函数的async/await异步调用时候,放在正常函数中单个调用时没有问题的,但是await放在forEach()循环里面就会报错,本文给大家介绍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中的数据
到此这篇关于vue 如何在 for 循环里面使用异步调用 async/await的文章就介绍到这了,更多相关vue for循环异步调用 async/await内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！