Vue 3 中 `async` 函数的示例

在 Vue 3 中，async 函数通常用于处理异步操作，例如从服务器获取数据或执行耗时任务。async 函数返回一个 Promise，并且可以使用 await 关键字等待异步操作完成。下面是一个简单的例子，演示如何在 Vue 3 组件中使用 async 和 await。

假设我们有一个 Vue 组件，它从 API 获取用户数据并在页面上显示。

代码解析：

1. data: 定义组件的状态，包括 user、loading 和 error。
2. created 生命周期钩子: 在组件创建时调用 created 钩子，这里用 async 标记为异步函数。
3. try...catch...finally 结构:
   • 在 try 块中，使用 fetch 函数从 API 获取数据，并使用 await 等待请求完成。
   • 如果请求失败，会抛出错误并进入 catch 块，设置 error 状态。
   • 无论请求成功还是失败，finally 块都会执行，设置 loading 为 false。
4. 模板渲染: 根据不同的状态显示内容，比如加载中状态、错误信息，或成功获取的数据。

这样，你就可以在 Vue 3 组件中使用 async 和 await 来处理异步操作了。