Vue 2中并行异步请求报TypeError的原因咨询

串行请求的问题 #

在JavaScript的async/await函数中，串行请求的写法如下：

const campaigns = await this.$api.campaigns.getCampaigns({all});
const campaigns2 = await this.$api.campaigns.getCampaigns({all});
const campaigns3 = await this.$api.campaigns.getCampaigns({all});

这种写法会导致campaigns2和campaigns3必须等待前一个请求完成后才会发起，请求效率低下。

尝试的并行写法 #

为了实现并行请求，有人尝试了以下写法：

const campaigns = this.$api.campaigns.getCampaigns({all});
const campaigns2 = this.$api.campaigns.getCampaigns({all});
const campaigns3 = this.$api.campaigns.getCampaigns({all});

await campaigns;
await campaigns2;
await campaigns3;

this.campaigns = campaigns3.data.data;

这段代码意图同时发起三个请求，但在Vue2中执行时抛出错误：

TypeError: Cannot read properties of undefined (reading 'data')

错误原因 #

问题核心是对Promise对象的误用：

• 你定义的campaigns、campaigns2、campaigns3都是Promise对象，不是请求返回的响应数据。串行写法里，await会自动把Promise的resolved结果赋值给变量；但并行写法里，你只是await了Promise让它完成，却没有把响应结果存下来。
• Promise对象本身并没有data属性，直接对campaigns3取data.data时，campaigns3.data会返回undefined，再读取下一级data就触发了TypeError。

正确的并行写法 #

可以通过两种方式修正：

1. 逐个await并赋值结果：

// 先发起所有请求，得到Promise对象
const campaignsPromise = this.$api.campaigns.getCampaigns({all});
const campaigns2Promise = this.$api.campaigns.getCampaigns({all});
const campaigns3Promise = this.$api.campaigns.getCampaigns({all});

// 等待每个Promise完成，获取响应数据
const campaigns = await campaignsPromise;
const campaigns2 = await campaigns2Promise;
const campaigns3 = await campaigns3Promise;

this.campaigns = campaigns3.data.data;

2. 使用Promise.all批量处理（更简洁）：

// 同时发起所有请求，等待全部完成后拿到结果数组
const [campaigns, campaigns2, campaigns3] = await Promise.all([
  this.$api.campaigns.getCampaigns({all}),
  this.$api.campaigns.getCampaigns({all}),
  this.$api.campaigns.getCampaigns({all})
]);

this.campaigns = campaigns3.data.data;

内容的提问来源于stack exchange，提问作者Čamo