vue await

// 使用 async/await 在 Vue 组件中进行异步操作

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

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

解释说明：

• async/await 是一种处理异步代码的方式，可以使异步代码看起来像同步代码，从而提高代码的可读性和维护性。
• 在上面的示例中，我们在 Vue 组件的 created 生命周期钩子中使用了 async/await 来等待 fetchData 方法返回的数据。
• fetchData 方法模拟了一个异步 API 请求，使用 Promise 来处理异步操作。
• 如果请求成功，data 会被赋值为从 API 获取的数据；如果请求失败，则会捕获错误并设置 error。