Vue.js Ajax(axios)学习笔记

什么是Ajax?

Ajax全称为Asynchronous JavaScript and XML，即异步的JavaScript和XML。它是一种通过后台和服务器进行数据交换的方式，而不需要刷新整个页面。

为什么使用Ajax?

使用Ajax可以使网页更加流畅和动态，避免了每次用户请求都要刷新整个页面的情况，提升了用户的体验感。

什么是axios?

Axios是一个基于Promise的HTTP库，可以用于浏览器和Node.js，并支持在请求和响应拦截器中处理请求和响应。

如何使用axios?

安装axios

bashCopy Code
npm install axios

在Vue项目中使用axios

1. 首先，在Vue组件头部引入axios：

   javascriptCopy Code
   import axios from 'axios'
   

2. 然后，在需要发送请求的方法中使用axios：

   javascriptCopy Code
   axios.get('/user')
     .then(function (response) {
       console.log(response);
     })
     .catch(function (error) {
       console.log(error);
     });
   

3. 发送POST请求

   javascriptCopy Code
   axios.post('/user', {
       firstName: 'John',
       lastName: 'Doe'
     })
     .then(function (response) {
       console.log(response);
     })
     .catch(function (error) {
       console.log(error);
     });
   

4. 在请求和响应拦截器中处理请求和响应

   javascriptCopy Code
   axios.interceptors.request.use(function (config) {
     // 在发送请求之前做些什么
     return config;
   }, function (error) {
     // 对请求错误做些什么
     return Promise.reject(error);
   });
   
   axios.interceptors.response.use(function (response) {
     // 对响应数据做点什么
     return response;
   }, function (error) {
     // 对响应错误做点什么
     return Promise.reject(error);
   });
   

实例

下面是一个使用axios获取数据的实例：

Copy Code
<template>
  <div>
    <h2>User List</h2>
    <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: []
    }
  },
  mounted () {
    axios.get('https://jsonplaceholder.typicode.com/users')
      .then(response => {
        this.users = response.data
      })
      .catch(error => {
        console.log(error)
      })
  }
}
</script>

在这个实例中，我们使用了axios发送GET请求，获取了https://jsonplaceholder.typicode.com/users这个API返回的用户数据，并将其渲染到页面上了。