起初效果：

使用async...await异步加载数据

最终效果：

代码：

<template><div class="user-list-container"><!-- 加载状态 --><div v-if="loading" class="loading">正在加载用户数据...</div><!-- 用户列表 --><div v-else><ul v-if="users.length > 0" class="user-list"><li v-for="user in users" :key="user.id" class="user-item">{{ user.name }} ({{ user.email }})</li></ul><div v-else class="empty">没有加载到用户数据。</div></div></div>
</template><script setup>
import { ref, onMounted } from "vue";// 响应式变量
const users = ref([]); // 用户列表
const loading = ref(true); // 加载状态// 模拟异步加载数据的方法
const fetchUsers = () => {return new Promise((resolve) => {setTimeout(() => {resolve([{ id: 1, name: "张三", email: "zhangsan@example.com" },{ id: 2, name: "李四", email: "lisi@example.com" },{ id: 3, name: "王五", email: "wangwu@example.com" },]);}, 2000); // 模拟 2 秒延迟});
};// 组件挂载时加载数据
onMounted(async () => {try {const data = await fetchUsers(); // 模拟异步加载用户数据users.value = data; // 更新用户列表} catch (error) {console.error("数据加载失败", error);} finally {loading.value = false; // 数据加载完成}
});
</script><style scoped>
.user-list-container {padding: 20px;font-family: Arial, sans-serif;
}.loading {text-align: center;font-size: 18px;color: gray;
}.user-list {list-style-type: none;padding: 0;
}.user-item {padding: 10px;border-bottom: 1px solid #ddd;font-size: 16px;
}.empty {text-align: center;font-size: 16px;color: gray;
}
</style>

使用.then()方法处理异步操作

<template><div class="user-list-container"><!-- 加载状态 --><div v-if="loading" class="loading">正在加载用户数据...</div><!-- 用户列表 --><div v-else><ul v-if="users.length > 0" class="user-list"><li v-for="user in users" :key="user.id" class="user-item">{{ user.name }} ({{ user.email }})</li></ul><div v-else class="empty">没有加载到用户数据。</div></div></div>
</template><script setup>
import { ref, onMounted } from "vue";// 响应式变量
const users = ref([]); // 用户列表
const loading = ref(true); // 加载状态// 模拟异步加载数据的方法
const fetchUsers = () => {return new Promise((resolve) => {setTimeout(() => {resolve([{ id: 1, name: "张三", email: "zhangsan@example.com" },{ id: 2, name: "李四", email: "lisi@example.com" },{ id: 3, name: "王五", email: "wangwu@example.com" },]);}, 2000); // 模拟 2 秒延迟});
};// 使用 .then() 方法加载数据
onMounted(() => {fetchUsers().then((data) => {users.value = data; // 更新用户列表}).catch((error) => {console.error("数据加载失败", error);}).finally(() => {loading.value = false; // 数据加载完成});
});
</script><style scoped>
.user-list-container {padding: 20px;font-family: Arial, sans-serif;
}.loading {text-align: center;font-size: 18px;color: gray;
}.user-list {list-style-type: none;padding: 0;
}.user-item {padding: 10px;border-bottom: 1px solid #ddd;font-size: 16px;
}.empty {text-align: center;font-size: 16px;color: gray;
}
</style>