使用Vue 3和Axios从第三方API获取异步数据并展示

<template>
  <div>
    <h1>GitHub 用户信息</h1>
    <p v-if="user">用户名: {{ user.login }}</p>
    <p v-if="user">邮箱: {{ user.email }}</p>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      user: null,
    };
  },
  created() {
    this.fetchUserData();
  },
  methods: {
    async fetchUserData() {
      try {
        const response = await axios.get('https://api.github.com/users/username');
        this.user = response.data;
      } catch (error) {
        console.error('获取用户数据失败:', error);
      }
    }
  }
};
</script>

这段代码展示了如何在Vue 3组件中使用axios从GitHub API获取特定用户的数据，并在组件创建时自动执行。它使用了async/await来处理异步请求，并在获取数据后更新组件的局部状态。这是一个简洁且有效的实践，适合作为教学示例。