一、介绍
Axios 是前端最常用的「发送网络请求的工具库」，比浏览器原生的 AJAX 更好用，还自带 Promise 支持，
新手上手超简单。二、安装
Axios 是第三方库，用之前要先 “引入” 到项目里，分两种场景（：
场景 1：新手测试（直接在 HTML 里引入）
不用装任何东西，直接从CDN引入
// 引入 Axios（从CDN服务器加载）
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>场景 2：项目开发（npm 安装）
如果是 Vue/React 项目，先打开终端，执行安装命令：
# npm 安装
npm install axios安装后，在项目的 JS 文件里引入：
// 引入 Axios
import axios from 'axios';三、核心基础：Axios 最常用的请求方式
Axios 支持所有 HTTP 请求方法，小白先掌握 2 个核心：GET（查数据）、POST（提交数据）。1. GET 请求
语法结构：
axios.get('请求地址', {params: { // 要传给后端的参数（可选）参数名1: 值1,参数名2: 值2}
})
.then(function(response) {// 请求成功：处理返回的数据console.log('请求成功：', response.data);
})
.catch(function(error) {// 请求失败：处理错误console.log('请求失败：', error);
});示例：
// 向后端请求“ID为1的用户信息”
axios.get('https://api.example.com/user', {params: {id: 1 // 传给后端的参数：id=1}
})
.then(function(res) {// res.data 是后端返回的实际数据console.log('用户姓名：', res.data.name);console.log('用户年龄：', res.data.age);
})
.catch(function(err) {console.log('查用户信息失败：', err.message);
});
说明：
params 里的参数会自动拼到请求地址后面，比如上面的请求地址最终是：https://api.example.com/user?id=1；
如果请求地址里有参数，比如https://api.example.com/user/1/，那这种需要直接用动态变量拼接，写成
axios.get(`https://api.example.com/user/${变量名}`, {params: {}
})
注意用变量时，地址要用反引号包裹，而不是用引号包裹了2. POST 请求
语法结构：
axios.post('请求地址', {// 要提交给后端的参数（请求体），注意这里和get请求的params不一样参数名1: 值1,参数名2: 值2
}, {headers: { // 请求头（可选，比如传token、CSRF令牌）'X-CSRFToken': ,'Content-Type': 'application/json' // 默认就是这个，新手可以先不写}
})
.then(function(response) {console.log('提交成功：', response.data);
})
.catch(function(error) {console.log('提交失败：', error);
});示例：
// 提交登录信息（用户名+密码）给后端
axios.post('https://api.example.com/login', {username: '小白123',password: '123456'
})
.then(function(res) {if (res.data.status === 'success') {alert('登录成功！');console.log('用户token：', res.data.token); // 后端返回的登录凭证} else {alert('登录失败：' + res.data.message);}
})
.catch(function(err) {alert('网络错误，登录失败：' + err.message);
});3. Axios 返回的 response 是什么？
不管 GET/POST，.then() 里的 response 是 Axios 封装的响应对象，核心属性：
axios.get('https://api.example.com/user').then(function(response) {console.log(response); // 打印完整响应对象// 常用的属性：response.data; // 后端返回的实际数据（最核心！）response.status; // HTTP状态码（200=成功，404=找不到，500=后端出错）response.headers; // 响应头（后端返回的额外信息）});四、高级功能
1. 请求拦截器（请求发送前做统一处理）
2. 响应拦截器（响应返回后做统一处理）
3. 批量请求（同时发多个请求，等所有请求完成）
