VueJS:在等待异步数据库调用结果时使用加载图标

在VueJS中，当应用程序需要等待异步操作（如数据库调用）的结果时，显示一个加载图标是一种常见的用户体验优化手段。这可以告知用户系统正在工作，并且他们应该耐心等待。

基础概念

异步操作：指的是不需要立即完成的操作，它可以在后台运行，而不会阻塞其他代码的执行。
加载图标：通常是一个旋转的圈或者进度条，用来表示系统正在处理请求。

类型

全局加载图标：当任何异步操作正在进行时显示。
局部加载图标：仅在特定组件或操作中显示。

应用场景

数据获取：在从服务器获取数据时显示。
表单提交：在提交表单并等待服务器响应时显示。
复杂计算：在执行可能需要较长时间的客户端计算时显示。

示例代码

以下是一个简单的Vue 3示例，展示了如何在等待异步数据库调用结果时使用加载图标。

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
    <div v-if="loading">Loading...</div>
    <div v-else-if="error">Error: {{ error.message }}</div>
    <div v-else>
      <!-- 显示数据 -->
      <pre>{{ data }}</pre>
    </div>
  </div>
</template>

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

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

    async function fetchData() {
      loading.value = true;
      error.value = null;
      try {
        // 模拟异步数据库调用
        const response = await fetch('/api/data');
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        data.value = await response.json();
      } catch (err) {
        error.value = err;
      } finally {
        loading.value = false;
      }
    }

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