vue在 for 循环里使用异步调用 async/await的方法
更新时间：2023年10月30日 11:34:54 作者：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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
通过实例介绍了如何使用elementTable表格组件获取勾选的数据,总结个人经验,旨在为读者提供参考和学习资源2025-12-12
vue路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转,下面这篇文章主要给大家介绍了关于Vue路由传参的三种方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-01-01
vue el-table字段点击出现el-input输入框,失焦保存方式
这篇文章主要介绍了vue el-table字段点击出现el-input输入框,失焦保存方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
这篇文章主要介绍了vue如何实现el-select下拉选项的懒加载，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue 插值表达式Mustache的相关资料，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
这篇文章主要介绍了Vue中自定义标签及其使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
在Vue应用中,跨标签页的通信通常涉及到两个或多个浏览器标签页之间的信息共享,由于每个标签页或窗口都是独立的JavaScript执行环境,它们不能直接通过Vue或其他JavaScript库来直接相互通信,但是,有一些方法可以实现这种跨标签页的通信,以下是一些常用的跨标签页通信方法2025-03-03
这篇文章主要为大家介绍了Vite配置优雅的code spliiting代码分割详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了vue3项目中封装axios的示例代码,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
这篇文章主要给大家介绍了关于Vue使用new Blob()实现不同类型的文件下载功能的相关资料,在Vue项目中,经常用Blob二进制进行文件下载功能,需要的朋友可以参考下2023-07-07
最新评论