vue等待接口返回再执行

// 使用 async/await 等待接口返回再执行

<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,
    };
  },
  methods: {
    async fetchData() {
      try {
        // 模拟一个异步请求
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
          throw new Error('网络响应失败');
        }
        this.data = await response.json();
      } catch (err) {
        this.error = err.message;
      } finally {
        this.loading = false;
      }
    },
  },
  created() {
    this.fetchData();
  },
};
</script>

解释说明：

1. 模板部分：使用了 Vue 的条件渲染指令 v-if、v-else-if 和 v-else 来根据不同的状态显示内容。当 loading 为 true 时，显示“加载中...”；如果有错误，则显示错误信息；否则显示从接口获取的数据。
2. 脚本部分：
   • data 函数返回了一个包含 loading、error 和 data 的对象，用于存储组件的状态。
   • fetchData 方法是一个异步函数，使用 async/await 来等待接口返回数据。它会调用 fetch 发起 HTTP 请求，并处理可能的错误。
   • created 生命周期钩子在组件创建后立即调用 fetchData 方法，以确保页面加载时就开始获取数据。

这样可以确保在接口返回数据之前不会执行后续逻辑，从而避免潜在的错误或不一致的状态。