for循环中异步请求问题：循环里面使用异步函数，如何等所有的异步函数都执行完再进行下一步

最新推荐文章于 2024-08-01 04:45:04 发布

萌新之路

最新推荐文章于 2024-08-01 04:45:04 发布

阅读量1.2k

点赞数

分类专栏： vue 文章标签：前端 javascript vue.js

原文链接：https://blog.youkuaiyun.com/qq_38594056/article/details/128973330

版权

vue 专栏收录该内容

49 篇文章

订阅专栏

文章介绍了在JavaScript中，如何利用forawait...of语句进行异步迭代，特别是在处理列表循环和调用接口时的应用。这种方法比使用Promise.all更简洁，适合于批量数据处理。示例代码展示了一个根据批次调用健康管理接口的异步函数，其中forawait...of遍历batchList并等待每个接口请求完成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文链接
场景是这样的：
在一个列表循环里，对数据进行赋值，调用接口，循环外后面的代码需等待所有请求执行完成后再去执行。

for await…of 语句创建一个循环，该循环遍历异步可迭代对象以及同步可迭代对象，包括：内置的 String, Array，类似数组对象 (例如 arguments 或 NodeList)，TypedArray, Map, Set 和用户定义的异步/同步迭代器。它使用对象的每个不同属性的值调用要执行的语句来调用自定义迭代钩子。
类似于 await 运算符一样，该语句只能在一个async function 内部使用。

for…of 针对可迭代对象身上的（array, map, set, string, typedarray, argements）
迭代的是对象列表中的值（value），一般情况遍历数组
for…in 针对对象的属性进行无序遍历，除了symbol类的属性
遍历的是属性，一般情况适用于对象遍历

该方法使用起来，相比Promise.all要简洁的多，十分好用
代码示例如下：

/**根据批次调健康管理接口 */
async handleHealthApi() {
  // 使用for await...of实现处理异步操作
  for await (let item of this.batchList) {
    let params = `?$filter=BatchID eq '${item.BatchId}'&$orderby=ImmunityDate`;
    let { value } = await immtipApi.ImmunityPromptBatch(params)
   	// do some thing...
  }
},