本文深入探讨了在javascript `async/await`函数中，尤其是在vue 2环境下，如何正确地并行发起多个异步请求并获取它们的解析结果。文章解释了直接 `await` 一个 promise 变量而不重新赋值的常见误区，以及由此导致的 `typeerror`，并提供了捕获 promise 解析值的正确方法，确保开发者能高效地处理并发异步操作。
理解 javaScript async/await 与 Promise 解析
在现代 javascript 中，async/await 语法极大地简化了异步操作的编写，使其看起来更像同步代码。它建立在 Promise 的基础上，允许我们“等待”一个 Promise 的完成。然而，在使用 await 关键字时，一个常见的误解是它会自动将 Promise 的解析值重新赋给原始变量。
考虑以下场景，我们希望并行发起三个 API 请求，而不是让它们串行执行：
// 串行执行，campaigns2 和 campaigns3 会等待前一个请求完成 const campaigns = await this.$api.campaigns.getCampaigns({all}); const campaigns2 = await this.$api.campaigns.getCampaigns({all}); const campaigns3 = await this.$api.campaigns.getCampaigns({all});
为了实现并行，我们通常会先创建 Promise 对象，然后统一等待它们完成：
// 尝试并行执行 const campaignsPromise = this.$api.campaigns.getCampaigns({all}); const campaigns2Promise = this.$api.campaigns.getCampaigns({all}); const campaigns3Promise = this.$api.campaigns.getCampaigns({all}); await campaignsPromise; // 等待第一个 Promise 完成 await campaigns2Promise; // 等待第二个 Promise 完成 await campaigns3Promise; // 等待第三个 Promise 完成 // 尝试访问解析后的数据 this.campaigns = campaigns3Promise.data.data; // 这里可能会出错
上述代码的意图是好的，它确实会并行发起三个请求。然而，在执行 await campaignsPromise; 之后，campaignsPromise 变量本身的值并没有改变。它仍然是一个 Promise 对象，而不是 Promise 解析后的实际数据。因此，当你尝试访问 campaigns3Promise.data.data 时，由于 campaigns3Promise 仍然是 Promise 对象，而 Promise 对象通常没有 data 属性（除非你的 API 封装返回的 Promise 本身就带了这样的结构，这不常见且不是标准行为），就会抛出 TypeError: Cannot read properties of undefined (reading ‘data’)。
立即学习“前端免费学习笔记（深入）”；
正确获取 Promise 的解析值
要正确地获取 Promise 的解析值，你必须将 await 表达式的结果赋值给一个新的变量（或重新赋值给原变量，但通常推荐新变量以避免混淆）。await 关键字的作用是暂停 async 函数的执行，直到 Promise 解决，并返回该 Promise 的解决值。
以下是正确的做法：
async fetchCampaigns() { // 1. 并行发起所有请求，获取 Promise 对象 const campaignsPromise = this.$api.campaigns.getCampaigns({all: true}); const campaigns2Promise = this.$api.campaigns.getCampaigns({all: true}); const campaigns3Promise = this.$api.campaigns.getCampaigns({all: true}); // 2. 逐一或统一等待 Promise 解决，并捕获其解析值 // 方式一：逐一捕获（仍是并行发起，但顺序获取结果） const campaignsResult = await campaignsPromise; const campaigns2Result = await campaigns2Promise; const campaigns3Result = await campaigns3Promise; // 现在可以安全地访问解析后的数据 this.campaigns = campaigns3Result.data.data; // 或者使用 campaignsResult, campaigns2Result // 方式二：使用 Promise.all 统一等待所有 Promise 解决 // 这种方式更简洁，且确保所有 Promise 都已解决 // const [campaignsResult, campaigns2Result, campaigns3Result] = await Promise.all([ // campaignsPromise, // campaigns2Promise, // campaigns3Promise // ]); // this.campaigns = campaigns3Result.data.data; }
在上面的示例中，campaignsResult、campaigns2Result 和 campaigns3Result 将分别持有对应 Promise 解决后的实际数据（例如，API 响应对象）。这样，你就可以安全地访问它们内部的 data 属性。
推荐的并行处理方式：Promise.all
对于多个相互独立的异步操作，Promise.all 是一个更优雅、更健壮的选择。它接收一个 Promise 数组，并返回一个新的 Promise。当数组中的所有 Promise 都成功解决时，这个新的 Promise 也会解决，其解决值是一个包含所有 Promise 解决值的数组（顺序与输入的 Promise 数组一致）。如果其中任何一个 Promise 失败，Promise.all 返回的 Promise 也会立即失败，并返回第一个失败 Promise 的错误信息。
async fetchAllCampaignsEfficiently() { 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}) ]); // 所有请求都已成功完成，并按顺序存储在数组中 console.log("第一个请求的结果:", campaignsData1.data.data); console.log("第二个请求的结果:", campaignsData2.data.data); console.log("第三个请求的结果:", campaignsData3.data.data); this.campaigns = campaignsData3.data.data; // 根据需求使用数据 } catch (error) { console.error("获取战役数据失败:", error); // 处理错误，例如显示错误消息给用户 } }
注意事项与总结
- await 的作用： await 关键字用于等待一个 Promise 解决，并返回其解决值。它不会改变原始 Promise 变量的类型。
- 变量赋值： 务必将 await 表达式的结果赋值给一个变量，以便后续访问解析后的数据。
- Promise.all： 当需要并行执行多个不相关的异步操作时，Promise.all 是首选，它提供了更好的错误处理和更简洁的代码。
- 错误处理： 在 async/await 函数中，使用 try…catch 块来捕获异步操作可能抛出的错误，这是良好的编程实践。
- vue 2 环境： 无论是在 Vue 组件的方法中还是在其他 JavaScript 环境中，async/await 的行为都是一致的。此问题并非 Vue 2 特有，而是 JavaScript async/await 语法的基本特性。
通过理解 await 的真正作用并正确捕获 Promise 的解析值，开发者可以更有效地利用 async/await 来管理复杂的异步流程，尤其是在需要并行处理多个请求以提升性能的场景中。