Vue3 Ajax(axios)学习笔记

1. 什么是Ajax？

Ajax（Asynchronous JavaScript and XML）指的是通过JavaScript的异步通信机制，以XML格式发送和接收数据的技术。

2. 什么是axios？

axios是一个基于Promise的HTTP客户端，用于浏览器和node.js中，具有以下特征：

• 在浏览器中发送HTTP请求（支持所有现代浏览器）。
• 在node.js中发送HTTP请求（支持所有node.js版本）。
• 支持Promise API。
• 拦截请求和响应。
• 转换请求和响应数据。
• 自动转换JSON数据。
• 客户端支持防止CSRF攻击。

3. axios的安装和使用

可以使用npm安装axios：

javascriptCopy Code
npm install axios

然后可以在Vue组件中使用axios进行网络请求：

javascriptCopy Code
import axios from 'axios';

export default {
  data() {
    return {
      users: [],
    };
  },
  methods: {
    getUsers() {
      axios.get('/api/users').then((response) => {
        this.users = response.data;
      });
    },
  },
};

4. axios常用方法实例

4.1 发送GET请求

javascriptCopy Code
axios
  .get('/api/users?id=123')
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.error(error);
  });

4.2 发送POST请求

javascriptCopy Code
axios
  .post('/api/users', {
    name: '张三',
    age: 18,
  })
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.error(error);
  });

4.3 发送PUT请求

javascriptCopy Code
axios
  .put('/api/users/123', {
    name: '张三',
    age: 18,
  })
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.error(error);
  });

4.4 发送DELETE请求

javascriptCopy Code
axios
  .delete('/api/users/123')
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.error(error);
  });

结论

axios是一个功能强大的HTTP客户端，可以在浏览器和node.js中使用。它具有简单易用的API和完整的请求和响应拦截器。通过axios，我们可以方便地进行网络请求和处理响应数据。