vue3 ajax

// 使用 Vue 3 和 Axios 进行 AJAX 请求的示例

// 首先确保你已经安装了 Axios
// npm install axios

<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() {
    // 定义一个响应式变量来存储用户数据
    const users = ref([]);

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

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

<style scoped>
/* 添加一些样式 */
ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin: 5px 0;
}
</style>

解释说明：

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

   • 使用 v-for 指令遍历 users 数组，并为每个用户生成一个 <li> 元素。

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

   • 导入 Vue 3 的 Composition API 函数 ref 和 onMounted，以及 Axios。
   • 定义一个响应式变量 users 来存储从服务器获取的用户数据。
   • 使用 onMounted 钩子在组件挂载后发起 AJAX 请求。
   • 使用 Axios 的 get 方法发起 HTTP GET 请求，获取用户数据，并将响应的数据赋值给 users 变量。
   • 如果请求失败，捕获错误并在控制台中输出错误信息。

3. 样式部分 (<style scoped>)：

   • 为列表元素添加了一些简单的样式，以确保页面美观。