本文深入探讨了 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 来处理数据请求。
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; } }, },};活动列表
加载中...
- {{ campaign.name }}
{{ error }}
注意事项
错误处理： 始终使用 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 环境中处理复杂的异步逻辑。
以上就是Vue 2 中 await 的正确用法：处理并行请求与获取返回值的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1531134.html
微信扫一扫 
支付宝扫一扫 
