axios vue3

// 在 Vue 3 中使用 Axios 的示例代码

// 首先确保你已经安装了 axios 和 vue
// 可以通过 npm 或 yarn 安装
// npm install axios vue@next

<template>
  <div>
    <h1>用户列表</h1>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import axios from 'axios';

export default {
  setup() {
    // 使用 ref 创建一个响应式变量来存储用户数据
    const users = ref([]);

    // 在组件挂载时获取用户数据
    onMounted(async () => {
      try {
        // 发送 GET 请求到 API 获取用户数据
        const response = await axios.get('https://jsonplaceholder.typicode.com/users');
        // 将获取到的用户数据赋值给 users 变量
        users.value = response.data;
      } catch (error) {
        console.error('获取用户数据失败:', error);
      }
    });

    return {
      users,
    };
  },
};
</script>

解释说明：

1. 模板部分 (<template>):

   • 显示一个标题 "用户列表"。
   • 使用 v-for 指令遍历 users 数组，并为每个用户生成一个 <li> 元素，显示用户的名称。

2. 脚本部分 (<script>):

   • 导入 ref 和 onMounted 函数，这两个函数来自 Vue 3 的 Composition API。
   • 导入 axios 库用于发送 HTTP 请求。
   • 使用 ref 创建一个名为 users 的响应式变量，初始值为空数组。
   • 使用 onMounted 钩子在组件挂载时执行异步操作，发送 GET 请求获取用户数据，并将结果赋值给 users 变量。
   • 如果请求失败，则捕获错误并在控制台输出错误信息。

这个示例展示了如何在 Vue 3 中使用 Axios 发送 HTTP 请求并处理响应数据。