vue3 async

// 使用 Vue 3 和 async/await 的示例代码

<template>
  <div>
    <h1>用户列表</h1>
    <ul v-if="users.length">
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
    <p v-else-if="error">{{ error }}</p>
    <p v-else>加载中...</p>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const users = ref([]);
    const error = ref(null);

    // 异步获取用户数据
    const fetchUsers = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users');
        if (!response.ok) {
          throw new Error('网络响应失败');
        }
        users.value = await response.json();
      } catch (err) {
        error.value = err.message;
      }
    };

    // 组件挂载时调用异步函数
    onMounted(() => {
      fetchUsers();
    });

    return {
      users,
      error,
    };
  },
};
</script>

解释说明：

1. 模板部分 (<template>):

   • 使用 v-if、v-else-if 和 v-else 来根据不同的状态显示内容。
   • 当 users 数组有数据时，显示用户列表；当有错误时，显示错误信息；否则显示加载中的提示。

2. 脚本部分 (<script>):

   • 使用 ref 创建响应式变量 users 和 error。
   • 定义了一个异步函数 fetchUsers，用于从 API 获取用户数据。
   • 使用 try...catch 捕获可能的错误，并将错误信息存储在 error 变量中。
   • 使用 onMounted 钩子在组件挂载时调用 fetchUsers 函数，以确保页面加载时自动获取数据。