本文深入探讨了 javascript 中 `async/await` 的核心机制，特别是在 vue 2 环境下如何正确获取 `await` 表达式的返回值，以及如何高效地处理多个并行异步请求。文章纠正了一个常见误区：`await promise;` 仅暂停执行，并不会将 promise 的解析值赋回原变量。我们将通过示例代码演示如何正确捕获解析值，并介绍使用 `promise.all()` 优化并行操作的最佳实践。
理解 async/await 的基本原理
在 JavaScript 中，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 的解析值。
虽然这种方式使得 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 上下文。
总结
正确理解 await 表达式的返回值是编写健壮异步代码的关键。记住 await promise; 仅暂停执行并等待 Promise 解决，但不会改变原 Promise 变量的值。要获取解析值，必须使用 const result = await promise;。
对于需要并行执行的多个异步操作，Promise.all() 结合 async/await 是最佳实践。它能有效提高程序效率，并提供统一的错误处理机制。通过掌握这些核心概念和最佳实践，你将能够更自信、更高效地在 Vue 2 及其他 JavaScript 环境中处理复杂的异步逻辑。
