vue3 await

在 JavaScript 中，await 是一个用于处理异步操作的关键字。它只能在 async 函数内部使用，并且用于等待一个 Promise 对象的解析。在 Vue 3 中，await 关键字常用于在组合式 API 的 setup 函数中处理异步操作，比如数据获取。

使用 await 的示例

以下是一个使用 await 关键字的简单示例，它在组件挂载时从一个 API 获取数据：

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

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

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

    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data'); // 发送异步请求
        const result = await response.json(); // 等待响应并解析为 JSON
        data.value = result; // 更新响应式数据
      } catch (error) {
        console.error('数据获取失败:', error);
      } finally {
        loading.value = false; // 请求完成后设置加载状态
      }
    };

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

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

<style>
/* 在这里添加你的样式 */
</style>

解释

1. 响应式数据:

   • data 和 loading 都是通过 ref 创建的响应式引用。data 用于存储从 API 获取的数据，loading 用于表示加载状态。

2. fetchData 异步函数:

   • fetchData 是一个异步函数，使用 async 关键字定义。
   • await fetch('https://api.example.com/data') 发送一个异步请求并等待响应。
   • await response.json() 等待响应解析为 JSON 格式。
   • 如果请求成功，将结果赋值给 data.value。
   • 在 try...catch 块中捕获和处理任何可能的错误。
   • 最后，无论请求是否成功，都将 loading.value 设置为 false。

3. 生命周期钩子 (onMounted):

   • 在 onMounted 钩子中调用 fetchData 函数，这样当组件挂载时会立即发送请求。

4. 模板 (Template):

   • 使用条件渲染 (v-if 和 v-else) 根据 loading 状态显示加载信息或数据。

通过这种方式，await 关键字可以简化异步操作的处理，使代码更易读且逻辑更清晰。