asyncData 数据请求

asyncData是一个特殊的方法，它可以在组件被实例化之前被调用，并且只能在页面组件中使用。它的主要作用是在组件渲染之前获取数据并将其注入到组件中。

在使用asyncData方法时，需要将其定义为一个异步函数，并且返回一个Promise对象。在执行异步操作时，asyncData方法会阻止组件的渲染，直到异步操作完成并返回数据。一旦数据返回，asyncData方法会将数据注入到组件实例的data属性中，以便组件可以使用它来进行渲染。

例如，以下是一个使用asyncData方法获取数据的示例：

<template>
  <div>
    <p v-if="loading">Loading...</p>
    <ul v-else>
      <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  async asyncData() {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts')
    const data = await response.json()
    return {
      posts: data,
      loading: false
    }
  },
  data() {
    return {
      posts: [],
      loading: true
    }
  }
}
</script>

在上面的例子中，我们使用asyncData方法来获取JSONPlaceholder API的帖子列表。一旦数据被获取并返回，它就会被注入到组件实例的data属性中，并且我们可以在模板中使用它来进行渲染。在数据加载期间，我们显示一个加载指示器。