vue async await用法

// 使用 async/await 的 Vue 示例

<template>
  <div>
    <button @click="fetchData">获取数据</button>
    <p v-if="loading">加载中...</p>
    <p v-if="error">{{ error }}</p>
    <ul v-if="items">
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: null,
      loading: false,
      error: null
    };
  },
  methods: {
    async fetchData() {
      this.items = null;
      this.loading = true;
      this.error = null;

      try {
        // 模拟一个异步请求
        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
        if (!response.ok) {
          throw new Error('网络响应错误');
        }
        const data = await response.json();
        this.items = data.slice(0, 5); // 只取前5个元素
      } catch (err) {
        this.error = err.message;
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>

解释说明：

1. async 和 await：

   • async 关键字用于定义一个函数为异步函数，它会返回一个 Promise。
   • await 关键字用于等待一个 Promise 完成，并且只能在 async 函数内部使用。

2. fetchData 方法：

   • 当用户点击按钮时，调用 fetchData 方法。
   • 使用 await 等待 fetch 请求完成，并处理可能的错误。
   • 如果请求成功，将数据赋值给 items，并在页面上显示。
   • 如果请求失败，捕获错误并显示错误信息。

3. 模板部分：

   • 使用 v-if 和 v-for 指令来控制 DOM 渲染。