vue3怎么使用async await

### Vue 3 中 Async/Await 的用法及示例 在 Vue 3 中，`async` 和 `await` 是处理异步操作的重要工具。通过它们，可以以同步的方式编写异步代码，从而提升代码的可读性和维护性。以下是对 `async` 和 `await` 在 Vue 3 中的具体用法及其示例的详细说明。 #### 1. 基本概念 `async` 关键字用于声明一个函数为异步函数，而 `await` 关键字则用于等待一个 Promise 的解决或拒绝[^1]。当使用 `await` 时，JavaScript 会暂停当前函数的执行，直到 Promise 被解决或拒绝后继续执行。 #### 2. 示例代码 以下是一个完整的示例，展示如何在 Vue 3 中使用 `async` 和 `await` 实现异步操作： ```javascript <template> <div> <p v-if="loading">加载中...</p> <p v-else-if="error">{{ error }}</p> <p v-else>{{ data }}</p> </div> </template> <script> export default { data() { return { loading: true, error: null, data: null, }; }, async created() { try { const result = await this.fetchData(); // 使用 await 等待异步操作完成 this.data = result; } catch (err) { this.error = "获取数据失败：" + err.message; // 捕获错误 } finally { this.loading = false; // 不论成功与否，结束加载状态 } }, methods: { fetchData() { return new Promise((resolve, reject) => { setTimeout(() => { if (Math.random() > 0.5) { resolve("数据加载成功"); // 模拟成功情况 } else { reject(new Error("模拟错误")); // 模拟失败情况 } }, 1000); }); }, }, }; </script> ``` #### 3. 异步请求链式调用 如果需要在一个请求完成后执行另一个依赖于前一个请求结果的请求，可以使用 `await` 链式调用来实现[^4]。例如： ```javascript async function fetchUserData() { try { const userResponse = await fetch("https://api.example.com/user"); const userData = await userResponse.json(); // 等待解析 JSON 数据 const postsResponse = await fetch( `https://api.example.com/posts?userId=${userData.id}` ); const postsData = await postsResponse.json(); // 等待解析 JSON 数据 console.log("用户数据：", userData); console.log("用户帖子：", postsData); } catch (error) { console.error("请求失败：", error); } } fetchUserData(); ``` #### 4. 错误处理 在使用 `async` 和 `await` 时，可以通过 `try...catch` 结构来捕获和处理异步操作中的错误[^2]。这使得错误处理更加直观和集中。 #### 5. 并发异步操作 如果多个异步操作之间没有依赖关系，可以使用 `Promise.all` 来并发执行这些操作[^3]。例如： ```javascript async function getAllFiles() { try { const [file1, file2, file3] = await Promise.all([ readFileAsync("./files/1.txt", "utf8"), readFileAsync("./files/2.txt", "utf8"), readFileAsync("./files/3.txt", "utf8"), ]); console.log(file1, file2, file3); } catch (error) { console.error("读取文件失败：", error); } } ``` ### 注意事项 - 确保在使用 `await` 时，其所在的函数被声明为 `async`。 - 使用 `try...catch` 来捕获可能的异常，避免程序崩溃。 - 对于并发的异步操作，可以结合 `Promise.all` 提升性能。