vue3 promise

// Vue 3 中使用 Promise 的示例

<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 = () => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          if (Math.random() > 0.5) {
            resolve('成功获取数据');
          } else {
            reject('请求失败');
          }
        }, 1000);
      });
    };

    onMounted(async () => {
      try {
        data.value = await fetchData();
        loading.value = false;
      } catch (err) {
        error.value = err;
        loading.value = false;
      }
    });

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

解释说明：

1. 模板部分：

   • 使用 v-if、v-else-if 和 v-else 来根据状态显示不同的内容。
   • 当 loading 为 true 时，显示“加载中...”。
   • 如果有错误（error 不为空），则显示错误信息。
   • 否则，显示获取到的数据。

2. 脚本部分：

   • 使用 ref 创建响应式变量 loading、error 和 data。
   • 定义一个模拟的异步函数 fetchData，返回一个 Promise，模拟网络请求。
   • 在 onMounted 钩子中调用 fetchData，并使用 await 等待其完成。
   • 如果请求成功，将结果赋值给 data 并关闭加载状态；如果失败，捕获错误并赋值给 error，同时关闭加载状态。