vue await async

// 使用 async/await 在 Vue 组件中处理异步操作

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

<script>
export default {
  data() {
    return {
      loading: true,
      message: ''
    };
  },
  async created() {
    try {
      // 使用 await 等待异步操作完成
      this.message = await this.fetchData();
    } catch (error) {
      this.message = '加载失败';
    } finally {
      this.loading = false;
    }
  },
  methods: {
    async fetchData() {
      // 模拟一个异步请求
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve('数据加载成功');
        }, 1000);
      });
    }
  }
};
</script>

<style scoped>
/* 样式代码 */
</style>

解释说明：

1. async/await：在 created 生命周期钩子中使用了 async 函数，使得我们可以使用 await 关键字来等待异步操作（如 API 请求）的完成。这使得代码更加简洁和易读。
2. loading 状态：在异步操作进行时，显示“加载中...”提示，当异步操作完成后（无论成功或失败），隐藏加载提示并显示结果。
3. 错误处理：通过 try/catch 结构捕获可能发生的错误，并在发生错误时显示相应的提示信息。
4. 模拟异步请求：fetchData 方法中使用 Promise 模拟了一个简单的异步请求，实际应用中可以替换为真实的 API 请求。