vue async await

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

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

<script>
export default {
  data() {
    return {
      loading: true,
      error: null,
      message: ''
    };
  },
  async created() {
    try {
      // 使用 async/await 处理异步请求
      const response = await fetch('https://api.example.com/data');
      if (!response.ok) {
        throw new Error('网络响应失败');
      }
      this.message = await response.json();
    } catch (err) {
      this.error = err.message;
    } finally {
      this.loading = false;
    }
  }
};
</script>

解释说明：

1. async/await：这是一种处理异步代码的方式，可以使异步代码看起来像同步代码，更加直观和易读。async 关键字用于声明一个函数是异步的，而 await 关键字用于等待一个 Promise 对象完成。
2. 生命周期钩子 created()：Vue 组件的生命周期钩子之一，在组件实例创建完成后立即调用。在这个例子中，我们使用它来发起一个异步请求。
3. 错误处理：通过 try...catch 结构来捕获可能发生的错误，并将错误信息存储在 error 变量中。
4. 状态管理：使用 loading 变量来显示加载状态，确保用户知道数据正在获取中；使用 message 变量来存储成功获取的数据；使用 error 变量来存储任何可能发生的错误信息。