系统性学习vue-vue中的ajax

在Vue中，通常使用axios库进行AJAX请求，因为它基于Promise，适用于所有现代的Web应用。

首先，你需要安装axios：

npm install axios

然后，你可以在Vue组件中使用axios发送请求：

<template>
  <div>
    <h1>User List</h1>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      users: []
    };
  },
  created() {
    this.fetchUsers();
  },
  methods: {
    fetchUsers() {
      axios.get('https://jsonplaceholder.typicode.com/users')
        .then(response => {
          this.users = response.data;
        })
        .catch(error => {
          console.error('There was an error!', error);
        });
    }
  }
};
</script>

在这个例子中，我们在组件被创建时（created() 生命周期钩子）从一个免费的REST API获取用户数据，并将其存储在本地状态中以供模板渲染。使用axios的get方法发送GET请求，它返回一个Promise，我们可以通过.then()来处理响应，并在.catch()中处理可能出现的错误。