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

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-10-20

浏览次数：次

返回列表

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

本文深入探讨了 j*ascript 中 `async/await` 的核心机制，特别是在 vue 2 环境下如何正确获取 `await` 表达式的返回值，以及如何高效地处理多个并行异步请求。文章纠正了一个常见误区：`await promise;` 仅暂停执行，并不会将 promise 的解析值赋回原变量。我们将通过示例代码演示如何正确捕获解析值，并介绍使用 `promise.all()` 优化并行操作的最佳实践。

理解 async/await 的基本原理

在 J*aScript 中，async/await 是处理异步操作的一种强大且优雅的方式，它让异步代码看起来和写起来更像同步代码。

async 关键字用于定义一个异步函数，该函数总是返回一个 Promise。
await 关键字只能在 async 函数内部使用，它会暂停 async 函数的执行，直到其后面的 Promise 解决（resolved）并返回其结果。

让我们看一个常见的顺序执行示例：

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;
}

在这个例子中，campaigns2 的请求会在 campaigns1 完成后才发出，campaigns3 同理。这种方式保证了操作的顺序性，但如果请求之间没有依赖关系，则会浪费时间。

await 返回值的常见误区与正确用法

许多开发者在使用 await 时会遇到一个常见的误区，即认为 await promise; 会将 Promise 解析后的值重新赋值给 promise 变量。然而，事实并非如此。

考虑以下代码：

// 错误示范：未能正确获取 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;
}

错误原因分析： 当执行 const campaignsPromise = this.$api.campaigns.getCampaigns({ all: true }); 时，campaignsPromise 变量被赋值为一个 Promise 对象。 await campaignsPromise; 这行代码的作用是：

暂停当前 async 函数的执行。
等待 campaignsPromise 这个 Promise 对象解决（resolve）。
一旦 campaignsPromise 解决，await 表达式会返回该 Promise 的解析值。
然后，async 函数从暂停的地方继续执行。

关键点在于：await campaignsPromise; 虽然等待了 Promise 解决，但它并没有改变 campaignsPromise 变量本身的值。campaignsPromise 变量依然引用着那个原始的 Promise 对象。 Promise 对象本身通常没有 data 属性，data 属性通常是 Promise 成功解决后返回的数据结构的一部分。

正确获取 await 返回值的方法是将其结果赋值给一个新的变量：

// 正确示范：获取 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; // 假设你需要第三个请求的数据
}

在这个修正后的示例中，campaignsPromise、campaigns2Promise 和 campaigns3Promise 这三个 Promise 会在几乎同时被发起（因为它们没有被 await 隔开）。然后，await resolvedCampaigns = await campaignsPromise; 会等待第一个 Promise 解决，并将其解析值赋给 resolvedCampaigns。接下来的 await 语句会依次等待并获取其他 Promise 的解析值。

AI Surge Cloud

低代码数据分析平台，帮助企业快速交付深度数据

87 查看详情 AI Surge Cloud

虽然这种方式使得 Promise 发起是并行的，但 await 语句本身依然是顺序执行的，这意味着总的等待时间是所有 Promise 解决时间之和（如果它们解决的时间不同）。

优化并行异步操作：使用 Promise.all()

对于多个相互独立的异步请求，我们通常希望它们能并行执行，并且在所有请求都完成后统一处理结果。Promise.all() 是实现这一目标的理想工具。

Promise.all() 接收一个 Promise 数组作为参数，并返回一个新的 Promise。当数组中的所有 Promise 都成功解决时，Promise.all() 返回的 Promise 也会解决，其解析值是一个包含所有 Promise 解析值的数组（顺序与输入数组一致）。如果其中任何一个 Promise 被拒绝，Promise.all() 返回的 Promise 也会立即被拒绝，并返回第一个被拒绝的 Promise 的错误信息。

// 使用 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);
    // 处理错误，例如显示错误消息给用户
  }
}

Promise.all() 的优势：

真正的并行等待： 所有 Promise 会同时发起，await Promise.all() 会等待所有 Promise 都解决后才继续执行，显著缩短总等待时间。
代码简洁： 将多个 await 语句合并为一个。
统一错误处理： 使用 try...catch 可以捕获任何一个 Promise 失败的情况。

在 Vue 2 中的实际应用

在 Vue 2 组件中，你可以在 methods、created 或 mounted 生命周期钩子中使用 async/await 来处理数据请求。

<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>

注意事项

错误处理： 始终使用 try...catch 块来包裹 await 表达式，以捕获可能发生的错误。对于 Promise.all()，任何一个 Promise 失败都会导致整个 Promise.all() 拒绝，并抛出第一个错误。如果你希望即使部分请求失败也能获取到成功请求的结果，可以考虑使用 Promise.allSettled()。
Promise.allSettled()： 与 Promise.all() 不同，Promise.allSettled() 会等待所有 Promise 都完成（无论成功或失败），并返回一个包含每个 Promise 状态和结果（或原因）的对象数组。这在某些场景下非常有用，例如你希望展示所有请求的结果，即使其中一些失败。
UI 状态管理： 在发起异步请求前设置 loading 状态为 true，请求完成后（无论成功或失败）将其设置为 false，以提供良好的用户体验。
Vue 2 this 上下文： 在 Vue 组件的 methods 或生命周期钩子中，this 会正确指向组件实例。但如果在 async 函数内部定义了普通函数或回调，需要注意 this 的指向问题，通常使用箭头函数来保持 this 上下文。