vue await用法

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

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

<script>
export default {
  data() {
    return {
      loading: true,
      data: null
    };
  },
  async created() {
    try {
      // await 关键字用于等待 Promise 解析
      this.data = await this.fetchData();
    } catch (error) {
      console.error('Error fetching data:', error);
    } finally {
      this.loading = false;
    }
  },
  methods: {
    // 模拟一个异步请求函数，返回一个 Promise
    fetchData() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve('Fetched Data');
        }, 1000);
      });
    }
  }
};
</script>

解释说明：

1. async/await：async 函数会返回一个 Promise，而 await 关键字用于等待 Promise 解析（即等待异步操作完成）。在上面的代码中，created 生命周期钩子被标记为 async，这样我们就可以使用 await 来等待 fetchData 方法的结果。

2. try/catch：为了处理可能发生的错误，我们在 await 的外面包裹了一个 try/catch 块。如果 fetchData 抛出异常，它会被 catch 捕获，并输出到控制台。

3. finally：无论 Promise 是否成功或失败，finally 块中的代码都会执行。在这里，我们用它来确保 loading 状态最终会被设置为 false。

4. 模拟异步请求：fetchData 方法模拟了一个异步请求，使用 setTimeout 来延迟解析 Promise，模拟网络请求的时间。

5. 模板部分：在模板中，我们根据 loading 和 data 的状态来显示不同的内容。当数据加载时，显示 "Loading..."；当数据加载完成后，显示实际的数据。