vue3 await

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

<template>
  <div>
    <p v-if="loading">加载中...</p>
    <p v-else>{{ message }}</p>
  </div>
</template>

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

export default {
  setup() {
    const loading = ref(true);
    const message = ref('初始消息');

    // 使用 async/await 来处理异步操作
    const fetchData = async () => {
      try {
        // 模拟一个异步请求
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        message.value = data.message;
      } catch (error) {
        message.value = '加载失败，请稍后再试。';
      } finally {
        loading.value = false;
      }
    };

    // 在组件挂载时调用 fetchData 函数
    onMounted(() => {
      fetchData();
    });

    return {
      loading,
      message,
    };
  },
};
</script>

解释说明：

1. 模板部分：使用了 v-if 和 v-else 来根据 loading 状态显示不同的内容。
2. 脚本部分：
   • 使用了 Vue 3 的组合式 API (setup 函数)。
   • 定义了两个响应式变量 loading 和 message，分别用于表示加载状态和显示的消息。
   • 使用 async/await 处理异步请求，模拟从 API 获取数据。
   • 在 onMounted 生命周期钩子中调用 fetchData 函数，确保在组件挂载后立即执行数据获取逻辑。
   • try...catch 结构用于捕获可能的错误，并更新 message 变量以显示错误信息。
   • finally 块确保无论请求成功与否，都会将 loading 状态设置为 false。