vue3 async await用法

// 示例代码：Vue 3 中使用 async/await

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

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

export default {
  setup() {
    const loading = ref(true);
    const error = ref(null);
    const data = ref(null);

    // 定义一个异步函数来获取数据
    const fetchData = async () => {
      try {
        // 模拟 API 请求
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
          throw new Error('网络响应不是 OK');
        }
        data.value = await response.json();
      } catch (err) {
        error.value = err.message;
      } finally {
        loading.value = false;
      }
    };

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

    return {
      loading,
      error,
      data,
    };
  },
};
</script>

解释说明：

1. 模板部分：

   • 使用 v-if、v-else-if 和 v-else 来根据 loading、error 和 data 的状态显示不同的内容。
   • 当 loading 为 true 时，显示“加载中...”；当 error 存在时，显示错误信息；否则显示从 API 获取的数据。

2. 脚本部分：

   • 使用 Vue 3 的组合式 API (setup 函数) 来管理组件的逻辑。
   • 定义了三个响应式变量 loading、error 和 data，分别用于表示加载状态、错误信息和数据。
   • 定义了一个异步函数 fetchData，它使用 async/await 来处理异步操作（如 API 请求）。
   • 在 try 块中执行异步请求，并检查响应是否成功。如果成功，则将返回的数据赋值给 data。
   • 如果发生错误（例如网络问题或响应不是 OK），则捕获错误并在 catch 块中设置 error。
   • 最后，在 finally 块中将 loading 设置为 false，无论请求成功与否。
   • 使用 onMounted 钩子在组件挂载时调用 fetchData 函数，以确保在组件渲染之前获取数据。

通过这种方式，你可以更清晰地处理异步操作，并且代码更具可读性和维护性。