Vue 2 中 await 的正确用法：处理并行请求与获取返回值

async function fetchDataSequentially() {
  // 第一个请求，await 会暂停函数执行直到请求完成
  const campaigns1 = await this.$api.campaigns.getCampaigns({ all: true });
  console.log('第一个请求数据:', campaigns1.data);

  // 第二个请求，会在第一个请求完成后才开始
  const campaigns2 = await this.$api.campaigns.getCampaigns({ all: true });
  console.log('第二个请求数据:', campaigns2.data);

  // 第三个请求，会在第二个请求完成后才开始
  const campaigns3 = await this.$api.campaigns.getCampaigns({ all: true });
  console.log('第三个请求数据:', campaigns3.data);

  this.campaigns = campaigns3.data.data;
}

// 错误示范：未能正确获取 Promise 的解析值
async function fetchParallelIncorrectly() {
  const campaignsPromise = this.$api.campaigns.getCampaigns({ all: true }); // campaignsPromise 此时是一个 Promise 对象
  const campaigns2Promise = this.$api.campaigns.getCampaigns({ all: true });
  const campaigns3Promise = this.$api.campaigns.getCampaigns({ all: true });

  await campaignsPromise; // 暂停执行直到 campaignsPromise 解决，但 campaignsPromise 变量本身仍然是 Promise 对象
  await campaigns2Promise; // 暂停执行直到 campaigns2Promise 解决
  await campaigns3Promise; // 暂停执行直到 campaigns3Promise 解决

  // 尝试访问 campaignsPromise.data 会导致错误，因为它仍然是 Promise 对象，而不是解析后的数据
  // TypeError: Cannot read properties of undefined (reading 'data')
  // this.campaigns = campaignsPromise.data.data;
}

// 正确示范：获取 Promise 的解析值
async function fetchParallelCorrectly() {
  const campaignsPromise = this.$api.campaigns.getCampaigns({ all: true });
  const campaigns2Promise = this.$api.campaigns.getCampaigns({ all: true });
  const campaigns3Promise = this.$api.campaigns.getCampaigns({ all: true });

  // 分别 await 并将解析值赋给新的变量
  const resolvedCampaigns = await campaignsPromise;
  const resolvedCampaigns2 = await campaigns2Promise;
  const resolvedCampaigns3 = await campaigns3Promise;

  // 现在可以安全地访问解析后的数据
  console.log('第一个请求数据:', resolvedCampaigns.data);
  console.log('第二个请求数据:', resolvedCampaigns2.data);
  console.log('第三个请求数据:', resolvedCampaigns3.data);

  this.campaigns = resolvedCampaigns3.data.data; // 假设你需要第三个请求的数据
}

// 使用 Promise.all() 优化并行请求
async function fetchAllCampaignsParallel() {
  try {
    const [campaignsData1, campaignsData2, campaignsData3] = await Promise.all([
      this.$api.campaigns.getCampaigns({ all: true }), // 发起第一个请求
      this.$api.campaigns.getCampaigns({ all: true }), // 发起第二个请求
      this.$api.campaigns.getCampaigns({ all: true })  // 发起第三个请求
    ]);

    // 所有请求并行发起，并等待它们全部完成。
    // campaignsData1、campaignsData2、campaigns3Data 分别是对应 Promise 的解析值。
    console.log('第一个请求数据:', campaignsData1.data);
    console.log('第二个请求数据:', campaignsData2.data);
    console.log('第三个请求数据:', campaignsData3.data);

    this.campaigns = campaignsData3.data.data; // 根据需求使用数据
  } catch (error) {
    console.error('获取活动数据失败:', error);
    // 处理错误，例如显示错误消息给用户
  }
}

<template>
  <div>
    <h1>活动列表</h1>
    <p v-if="loading">加载中...</p>
    <ul v-else>
      <li v-for="campaign in campaigns" :key="campaign.id">
        {{ campaign.name }}
      </li>
    </ul>
    <p v-if="error">{{ error }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      campaigns: [],
      loading: false,
      error: null,
    };
  },
  async created() {
    this.loading = true;
    this.error = null;
    try {
      // 假设 this.$api.campaigns.getCampaigns 返回 Promise
      const [campaignsResponse1, campaignsResponse2] = await Promise.all([
        this.$api.campaigns.getCampaigns({ type: 'active' }),
        this.$api.campaigns.getCampaigns({ type: 'inactive' }),
      ]);

      // 假设 API 返回的数据结构是 { data: { data: [...] } }
      this.campaigns = [...campaignsResponse1.data.data, ...campaignsResponse2.data.data];

    } catch (err) {
      console.error('获取活动数据失败:', err);
      this.error = '无法加载活动数据，请稍后再试。';
    } finally {
      this.loading = false;
    }
  },
  methods: {
    // 可以在 methods 中定义其他异步操作
    async refreshCampaigns() {
      this.loading = true;
      this.error = null;
      try {
        const response = await this.$api.campaigns.getCampaigns({ all: true });
        this.campaigns = response.data.data;
      } catch (err) {
        console.error('刷新活动数据失败:', err);
        this.error = '刷新失败。';
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>