js 之 axios

一、介绍
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. 批量请求（同时发多个请求，等所有请求完成）