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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了深入理解Vue 单向数据流的原理，详细的介绍了Vue 单向数据流的原理和使用，具有一定的参考价值，有兴趣的可以了解一下2017-11-11
这篇文章主要为大家详细介绍了Vue3中v-model语法糖的三种写法,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以跟随小编一起学习一下2024-01-01
门户（Portal）的概念是Vue3的新功能之一，也就是将模板 HTML 移至 DOM 的不同部分的方法。Portal 是 React 中的常见功能，Vue2 的 portal-vue 库也提供了相似的功能。在 Vue3 中用 Teleport 对这个概念提供了原生支持。本文将介绍Teleport的相关用法2021-05-05
图片轮播是前端中经常需要实现的一个功能。最近学习Vue.js，就针对Swiper进行封装，实现一个简单的图片轮播组件。感兴趣的朋友跟随脚本之家小编一起学习吧2018-02-02
element中el-table表头通过header-row-style设置样式
有些时候需要给element-ui表头设置不同样式,本文主要介绍了element中el-table表头通过header-row-style设置样式,具有一定的参考价值,感兴趣的可以了解一下2024-01-01
这篇文章主要介绍了vue之如何实现打印功能问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要为大家详细介绍了前端实现Vue组件页面跳转的多种方式,文中的示例代码讲解详细,具有一定的参考价值,有需要的小伙伴可以了解下2024-02-02
今天小编就为大家分享一篇vue中当图片地址无效的时候,显示默认图片的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
本篇文章主要介绍了详解vue.js2.0父组件点击触发子组件方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要介绍了在vue中实现禁止屏幕滚动,禁止屏幕滑动，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
最新评论