当前位置：首页 > article >正文

Vue 3 中 `async` 函数的示例

article 2025/3/6 11:26:50

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

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

<template>
  <div>
    <h1>User Information</h1>
    <div v-if="loading">Loading...</div>
    <div v-else-if="error">{{ error }}</div>
    <div v-else>
      <p>Name: {{ user.name }}</p>
      <p>Email: {{ user.email }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: null,
      loading: true,
      error: null
    };
  },
  async created() {
    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
      if (!response.ok) {
        throw new Error('Failed to fetch user data');
      }
      this.user = await response.json();
    } catch (err) {
      this.error = err.message;
    } finally {
      this.loading = false;
    }
  }
};
</script>

<style>
/* 添加一些简单的样式 */
</style>

代码解析：

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