vue使用forEach循环加Promise.all来发送多个请求，并且等到所有请求结束后处理数据项目场景：实现方法：

86 阅读 0 评论 57 点赞

我是靠谱客的博主光亮悟空，这篇文章主要介绍vue使用forEach循环加Promise.all来发送多个请求，并且等到所有请求结束后处理数据项目场景：实现方法：，现在分享给大家，希望可以做个参考。

项目场景：

项目中要根据一个 id 的数组列表，来查询所有的数据
需要对同一个接口循环发送多个请求，次数不定
必须等所有结果返回后，再处理数据，并展示

实现方法：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 //循环遍历产品id 查询定向包信息
async getProductId() {
// 请求队列
let list = []
this.tableBidgetData.forEach((e) => {
// 循环推送请求到队列 (accountId = ['1', '2', '3'],则会同时发送3次请求)
list.push(this.getDxp(e.accountId))
})
// 所有请求都已完成，直接返回或处理 res
const res = await Promise.all(list)
this.tableBidgetData.forEach((e) => {
res.forEach((n) => {
e.dxpList = n.data.list
})
})
this.tableKey += 1
},
// 定向包查询
async getDxp(id) {
let postData = {
accountId: id,
page: 1,
size: 100,
}
const res = await audiencePackageList(postData)
return res
},