vue3 async 关键字

async 关键字用于声明一个异步函数，这个函数会返回一个 Promise 对象。与 await 关键字配合使用时，可以在异步函数中暂停代码执行，直到 Promise 解决或拒绝，从而使异步代码的处理更简单和同步化。

使用 async 的示例

下面是一个完整的 Vue 3 组件示例，展示了如何使用 async 和 await 来处理异步操作：

<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. async 关键字:

   • fetchData 函数使用 async 关键字声明。这样这个函数就成为一个异步函数，会自动返回一个 Promise。

2. await 关键字:

   • 在 fetchData 函数内部，await 关键字用于等待 fetch 请求的完成和响应解析。await 可以暂停函数的执行，直到 Promise 解决为止。

3. 异步函数的错误处理:

   • 使用 try...catch 块来捕获并处理异步操作中的任何错误，确保即使在发生错误时也不会导致应用崩溃。

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

   • 在组件挂载时调用 fetchData 函数，通过 onMounted 钩子实现。

实际应用场景

异步函数和 await 的使用场景非常广泛，尤其是在处理以下操作时：

1. 数据获取：从远程 API 获取数据。
2. 文件操作：读取或写入文件（在 Node.js 中）。
3. 定时操作：等待一定时间后执行操作。
4. 数据库操作：执行数据库查询或更新。

通过 async 和 await，可以大大简化这些异步操作的代码，使其更具可读性和可维护性。例如，在一个实际的 Vue 3 项目中，您可以这样使用：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

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

export default {
  setup() {
    const items = ref([]);
    const loading = ref(true);

    const fetchItems = async () => {
      try {
        const response = await fetch('https://api.example.com/items');
        const data = await response.json();
        items.value = data;
      } catch (error) {
        console.error('Failed to fetch items:', error);
      } finally {
        loading.value = false;
      }
    };

    onMounted(() => {
      fetchItems();
    });

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

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

在这个示例中，fetchItems 异步函数用于从远程 API 获取数据，并将结果存储在响应式引用 items 中。这样，Vue 会自动更新 DOM 以反映数据的变化。