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 指定组件缓存实例详解
keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。这篇文章主要介绍了vue 指定组件缓存,需要的朋友可以参考下
2018-04-04
Vue 如何追踪数据变化
这篇文章主要介绍了Vue 如何追踪数据变化，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下
2021-04-04
vue 实现一个简单的全局调用弹窗案例
这篇文章主要介绍了vue 实现一个简单的全局调用弹窗案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
后台使用freeMarker和前端使用vue的方法及遇到的问题
这篇文章主要介绍了后台使用freeMarker和前端使用vue的方法及遇到的问题,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-06-06
vue3 el-select懒加载以及自定义指令方式
这篇文章主要介绍了vue3 el-select懒加载以及自定义指令方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-04-04
vue函数防抖与节流的正确使用方法
防抖和节流的作用都是防止函数多次调用，下面这篇文章主要给大家介绍了关于vue函数防抖与节流的正确使用方法，需要的朋友可以参考下
2021-05-05
纯前端使用Vue3上传文件到minio文件服务器(粘贴可直接用)
vue是目前最流行的前端框架,下面这篇文章主要给大家介绍了关于纯前端使用Vue3上传文件到minio文件服务器的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-04-04
在vue中使用jsx语法的使用方法
这篇文章主要介绍了在vue中使用jsx语法的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09
Vue组件开发技巧总结
这篇文章通过代码示例给大家详细分析了Vue组件开发的相关技巧以及知识点，对此有需要的读者们参考下吧。
2018-03-03
vue 实现LED数字时钟效果（开箱即用）
这篇文章主要介绍了vue 实现LED数字时钟效果（开箱即用）,每一个数字由七个元素构成，即每一个segment元素，本文给大家分享实现实例，感兴趣的朋友一起看看吧
2019-12-12