动力节点Vue3课程笔记——Vue与AJAX

在Vue 3中，我们可以使用Axios库来处理HTTP请求，这是一种非常流行的方式。Axios是一个基于Promise的HTTP客户端，可以在浏览器和node.js中使用。

以下是一个简单的例子，展示如何在Vue 3项目中使用Axios发送GET请求：

首先，安装Axios：

npm install axios

然后，在Vue组件中使用Axios发送请求：

<template>
  <div>
    <h1>用户列表</h1>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
  </div>
</template>
 
<script>
import { ref } from 'vue';
import axios from 'axios';
 
export default {
  setup() {
    const users = ref([]);
 
    const fetchUsers = async () => {
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/users');
        users.value = response.data;
      } catch (error) {
        console.error(error);
      }
    };
 
    fetchUsers();
 
    return {
      users,
    };
  },
};
</script>

在这个例子中，我们定义了一个fetchUsers函数，使用async/await语法来处理异步请求。我们在setup函数中调用了这个函数，以便在组件被创建时获取用户数据。我们还展示了如何使用模板语法来遍历users数组，并显示每个用户的名字。