深入理解Vue中的异步操作和Async/Await

<template>
  <div>
    <p>用户信息:</p>
    <div v-if="user">
      <p>ID: {{ user.id }}</p>
      <p>姓名: {{ user.name }}</p>
    </div>
    <div v-else>
      <p>加载中...</p>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      user: null,
    };
  },
  async created() {
    try {
      this.user = await this.fetchUser();
    } catch (error) {
      console.error('获取用户信息时出错:', error);
      this.user = null;
    }
  },
  methods: {
    async fetchUser() {
      const response = await this.$http.get('/api/user');
      return response.data;
    }
  }
};
</script>

这个例子中，我们在Vue组件的created生命周期钩子中使用async/await来异步获取用户信息。fetchUser方法返回一个基于HTTP GET请求的Promise，当Promise解析后，用户信息会被赋值给组件的user数据属性。如果在获取过程中发生错误，它会被捕获，并且在控制台中输出错误信息，同时将user属性设置为null。这样可以确保即使异步操作失败，组件的状态也会得到适当的处理，防止出现未定义的用户信息。