1.8 axios详解

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请求配置中常用参数如下：

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的对比

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=1page: 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 会自动：

1. 将对象序列化为 JSON 字符串。
2. 设置 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 编码字符串，常用两种方式：

1. 使用 URLSearchParams 构造函数（浏览器原生支持）。
2. 使用 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 会自动：

1. 设置 Content-Type: multipart/form-data; boundary=xxx（boundary 为自动生成的分隔符）。
2. 处理二进制文件流。

示例

<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() 添加）。