Axios的定义与核心特性
Axios是一个基于Promise的现代化HTTP客户端库，主要用于在浏览器和Node.js 环境中发送HTTP请求，旨在简化异步数据交互流程。其核心特性如下：
- 跨平台支持：在浏览器中通过XMLHttpRequest对象发送请求，在Node.js 环境中使用http模块发送请求。
- Promise API：所有请求均返回Promise对象，支持async/await语法，简化异步代码逻辑。
- 自动数据转换：默认自动将请求和响应数据转换为JSON格式，也支持自定义转换规则。
- 拦截器机制：可拦截请求和响应，用于添加认证头、统一错误处理等。
- 安全性增强：客户端支持防御XSRF（跨站请求伪造），通过在请求中携带Cookie中的令牌验证请求合法性。
Axios的基本使用方法
引入Axios
使用Axios前需先引入其JS文件，可通过本地文件或CDN方式引入。例如本地引入：
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>发送HTTP请求
Axios支持多种请求方式，核心通过axios(config)方法配置请求参数，常用请求方式及示例如下：
- GET请求：用于获取数据，参数需拼接到URL后。
axios({
method: 'get',
url: 'http://example.com/api/employees' // 可添加参数：url: 'http://example.com/api/employees?id=1'
}).then(result => {
console.log(result.data); // 响应数据存储在result.data 中
}); - POST请求：用于提交数据，参数通过
data属性传递。
axios({
method: 'post',
url: 'http://example.com/api/employees/delete',
data: 'id=1' // 表单格式参数
}).then(result => {
console.log(result.data);
}); 核心配置参数
Axios请求配置中常用参数如下：
| 参数名 | 作用 | 示例 |
|---|---|---|
method |
指定请求方式（默认get） |
method: 'post' |
url |
请求地址 | url: '/api/data' |
baseURL |
基础URL，自动拼接在url前（若url为绝对路径则忽略） |
baseURL: 'http://example.com' |
params |
GET请求参数（自动拼接到URL） | params: { id: 1, name: 'test' } |
data |
POST请求参数（适用于JSON或表单数据） | data: { key: 'value' } |
headers |
自定义请求头 | headers: { 'Content-Type': 'application/json' } |
Axios的高级特性
拦截器
拦截器用于在请求发送前或响应处理前对其进行拦截和修改，分为请求拦截器和响应拦截器：
- 请求拦截器：可添加认证Token、设置统一请求头。
axios.interceptors.request.use(
config => {
config.headers.Authorization = 'Bearer ' + localStorage.getItem('token');
return config;
},
error => Promise.reject(error)
); - 响应拦截器：可统一处理错误、转换响应数据。
axios.interceptors.response.use(
response => response.data, // 直接返回响应数据，简化后续处理
error => {
if (error.response.status === 401) {
// 处理未授权错误（如跳转登录页）
}
return Promise.reject(error);
}
); Axios与传统Ajax的对比
| 特性 | 传统Ajax（XMLHttpRequest） | Axios |
|---|---|---|
| 语法复杂度 | 需手动创建XHR对象，处理回调地狱 | 基于Promise，支持async/await，代码简洁 |
| 浏览器兼容性 | 需兼容低版本浏览器（如IE） | 现代浏览器及Node.js 环境支持，低版本需polyfill |
| 功能完整性 | 需手动处理JSON转换、超时、错误等 | 内置JSON转换、拦截器、取消请求等功能 |
| 安全性 | 需手动实现XSRF防御 | 内置XSRF防御机制 |
Axios作为对传统Ajax的封装，大幅降低了异步请求的开发成本，已成为前端与后端交互的主流工具，尤其在Vue、React等现代框架中被广泛推荐使用
Axios 发送不同类型数据的区别及使用场景
Axios 发送数据时，需根据 数据类型 和 后端接口要求 选择不同的配置方式，核心区别体现在 数据格式、Content-Type 请求头 和 传输位置（URL 或请求体）上。以下是常见场景的详细对比：
一、URL 参数（params）：拼接在 URL 中
用途
- 用于 GET 请求传递查询参数（如分页、筛选、排序）。
- 数据会以
key=value形式拼接在 URL 末尾（如https://api.com/data?id=1&name=test）。
配置方式
通过 params 选项传递，Axios 会自动将对象序列化为 URL 查询字符串。
示例
<script>
// ... 现有代码（如 axios 基础配置、拦截器）...
{{ edit: URL 参数示例 }}
// GET 请求传递 URL 参数
async function fetchWithParams() {
try {
const response = await axios.get('/posts', {
params: {
userId: 1, // 会自动拼接为 ?userId=1&page=1
page: 1
}
});
console.log('URL 参数请求结果：', response);
} catch (error) {
console.error('请求失败：', error);
}
}
// 添加触发按钮
buttonContainer.innerHTML += `
<button onclick="fetchWithParams()">发送带 URL 参数的 GET 请求</button>
`;
</script>
关键特点
- 传输位置：URL query string（可见，有长度限制）。
- Content-Type：无需设置（GET 请求无请求体）。
- 数据格式：简单键值对（Axios 自动处理对象序列化）。
二、JSON 数据（请求体）：API 接口常用
用途
- 用于 POST/PUT/PATCH 等请求传递结构化数据（如创建/更新资源）。
- 后端接口通常要求
Content-Type: application/json。
配置方式
通过 data 选项传递 JavaScript 对象，Axios 会自动：
- 将对象序列化为 JSON 字符串。
- 设置
Content-Type: application/json请求头。
示例
<script>
// ... 现有代码 ...
{{ edit: JSON 数据示例 }}
// POST 请求发送 JSON 数据
async function submitJsonData() {
try {
const userData = {
name: "张三",
age: 25,
hobbies: ["coding", "reading"] // 支持嵌套结构
};
const response = await axios.post('/users', userData); // 直接传递对象
console.log('JSON 数据提交结果：', response);
} catch (error) {
console.error('请求失败：', error);
}
}
// 添加触发按钮
buttonContainer.innerHTML += `
<button onclick="submitJsonData()">发送 JSON 数据（POST）</button>
`;
</script>
关键特点
- 传输位置：请求体（Request Body）。
- Content-Type：自动设置为
application/json。 - 数据格式：支持复杂嵌套对象（Axios 自动 JSON.stringify）。
三、表单数据（application/x-www-form-urlencoded）：传统表单提交
用途
- 模拟 HTML 表单提交（如
form标签的method="post"）。 - 后端接口要求
Content-Type: application/x-www-form-urlencoded（数据格式为key1=value1&key2=value2）。
配置方式
需手动将数据格式化为 URL 编码字符串，常用两种方式：
- 使用
URLSearchParams构造函数（浏览器原生支持）。 - 使用
qs.stringify库（需额外引入，适合复杂对象）。
示例
<script>
// ... 现有代码 ...
{{ edit: 表单数据（x-www-form-urlencoded）示例 }}
// POST 请求发送表单编码数据
async function submitFormData() {
try {
// 方式 1：使用 URLSearchParams（简单键值对）
const formData = new URLSearchParams();
formData.append('username', 'zhangsan');
formData.append('password', '123456');
// 方式 2：使用 qs.stringify（需先引入 qs 库，适合嵌套对象）
// const qs = require('qs'); // Node.js 环境
// const formData = qs.stringify({ username: 'zhangsan', password: '123456' });
const response = await axios.post('/login', formData);
console.log('表单数据提交结果：', response);
} catch (error) {
console.error('请求失败：', error);
}
}
// 添加触发按钮
buttonContainer.innerHTML += `
<button onclick="submitFormData()">发送表单编码数据（POST）</button>
`;
</script>
关键特点
- 传输位置：请求体。
- Content-Type：Axios 会自动设置为
application/x-www-form-urlencoded（当使用URLSearchParams时）。 - 数据格式：扁平键值对（不支持嵌套对象，需手动处理）。
四、文件/图片上传（multipart/form-data）：二进制数据
用途
- 上传文件（如图片、文档），需使用
multipart/form-data格式。 - 数据会被分割为多个 "部分"（part），每个部分包含文件名和二进制内容。
配置方式
通过 FormData 对象构造数据，Axios 会自动：
- 设置
Content-Type: multipart/form-data; boundary=xxx（boundary 为自动生成的分隔符）。 - 处理二进制文件流。
示例
<body>
{{ edit: 添加文件上传输入框 }}
<input type="file" id="fileInput" accept="image/*"> <!-- 用于选择图片 -->
<script>
// ... 现有代码 ...
{{ edit: 文件上传示例 }}
// 上传图片文件
async function uploadImage() {
try {
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0]; // 获取选择的文件
if (!file) {
alert('请先选择图片');
return;
}
const formData = new FormData();
formData.append('image', file); // 'image' 为后端接收的字段名
formData.append('description', '用户头像'); // 可同时传递其他文本字段
const response = await axios.post('/upload', formData);
console.log('文件上传结果：', response);
alert('上传成功，文件 URL：' + response.url);
} catch (error) {
console.error('上传失败：', error);
}
}
// 添加触发按钮
buttonContainer.innerHTML += `
<button onclick="uploadImage()">上传图片</button>
`;
</script>
</body>
关键特点
- 传输位置：请求体（二进制流）。
- Content-Type：自动设置为
multipart/form-data（带分隔符）。 - 数据格式：支持文件和文本混合传输（通过
FormData.append()添加）。