Axios 请求

一、Axios：现代 HTTP 请求客户端

Axios 是基于 Promise 的 HTTP 客户端，可在浏览器和 Node.js 中使用，本质是对原生 XMLHttpRequest 的封装，解决了传统 AJAX 语法繁琐、回调地狱等问题，是目前前端最流行的网络请求工具之一。

1. Axios 核心特性

• 支持 Promise API，可配合 async/await 简化异步代码
• 拦截请求和响应（添加 Token、统一处理错误等）
• 自动转换 JSON 数据，无需手动解析
• 支持取消请求、防御 XSRF 攻击
• 浏览器端和 Node.js 端通用，兼容性好

2. Axios 基本使用

（1）引入方式

通过 CDN 直接引入（适合快速开发）：

html

预览

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

或通过 npm 安装（适合工程化项目）：

bash

npm install axios

（2）四种核心请求方法

Axios 支持 GET（查询）、POST（新增）、PUT（更新）、DELETE（删除）四种常用请求，每种请求有两种调用格式：配置对象式和快捷方法式。

请求方法	作用	传参方式	示例代码
GET	查询数据	params（URL 拼接参数）	axios.get('/user', { params: { ID: 123 } })
POST	新增数据	data（请求体）	axios.post('/user', { firstName: 'Fred' })
PUT	全量更新数据	data（请求体）	axios.put('/user/123', { firstName: 'Fred' })
DELETE	删除数据	URL 路径参数或 params	axios.delete('/user/123')

示例：完整请求代码（以模拟数据为例）

需先通过 json-server 启动本地模拟服务（创建 db.json 并执行 json-server --watch db.json）：

html

预览

<!-- HTML 按钮 -->
<button id="getBtn">GET 查询数据</button>
<button id="postBtn">POST 新增数据</button>
<button id="putBtn">PUT 更新数据</button>
<button id="deleteBtn">DELETE 删除数据</button><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>// 1. GET 请求：查询 ID 为 1 的数据document.getElementById('getBtn').onclick = () => {axios.get('http://localhost:3000/posts/1').then(res => console.log('GET 结果：', res.data)).catch(err => console.log('GET 错误：', err));};// 2. POST 请求：新增一条数据document.getElementById('postBtn').onclick = () => {axios.post('http://localhost:3000/posts', {title: 'Axios 学习',author: '张三'}).then(res => console.log('POST 结果：', res.data)).catch(err => console.log('POST 错误：', err));};// 3. PUT 请求：更新 ID 为 2 的数据document.getElementById('putBtn').onclick = () => {axios.put('http://localhost:3000/posts/2', {title: 'Axios 进阶',author: '李四'}).then(res => console.log('PUT 结果：', res.data)).catch(err => console.log('PUT 错误：', err));};// 4. DELETE 请求：删除 ID 为 2 的数据document.getElementById('deleteBtn').onclick = () => {axios.delete('http://localhost:3000/posts/2').then(res => console.log('DELETE 成功', res)).catch(err => console.log('DELETE 错误：', err));};
</script>

3. Axios 高级配置

（1）全局默认配置

对所有请求统一配置（如基础 URL、超时时间），避免重复代码：

javascript

运行

// 设置全局基础 URL（后续请求只需写相对路径）
axios.defaults.baseURL = 'http://localhost:3000';
// 设置请求超时时间（10 秒）
axios.defaults.timeout = 10000;
// 设置默认请求头（如 JSON 格式）
axios.defaults.headers.common['Content-Type'] = 'application/json';// 后续请求可简化：无需写完整 URL
axios.get('/posts/1').then(res => console.log(res.data));

（2）拦截器（核心功能）

拦截器分为请求拦截器和响应拦截器，可在请求发送前、响应返回后统一处理逻辑（如添加 Token、处理错误）。

① 请求拦截器

常用于添加身份认证 Token、设置请求头：

javascript

运行

axios.interceptors.request.use(// 请求成功拦截：修改配置config => {// 从本地存储获取 Token 并添加到请求头const token = localStorage.getItem('token');if (token) {config.headers.Authorization = `Bearer ${token}`;}console.log('请求即将发送：', config);return config; // 必须返回 config，否则请求会中断},// 请求失败拦截：处理错误（如网络错误）error => {console.log('请求拦截错误：', error);return Promise.reject(error); // 传递错误到后续 catch}
);

② 响应拦截器

常用于统一处理响应数据、拦截错误状态码（如 401 未授权）：

javascript

运行

axios.interceptors.response.use(// 响应成功拦截：简化返回数据（直接返回 data，无需后续取 res.data）response => {console.log('响应成功：', response);return response.data; // 后续 then 直接接收 data},// 响应失败拦截：统一处理错误error => {// 处理 401 未授权（跳转登录页）if (error.response && error.response.status === 401) {localStorage.removeItem('token'); // 清除无效 Tokenwindow.location.href = '/login.html'; // 跳转登录}console.log('响应错误：', error.message);return Promise.reject(error);}
);// 拦截后使用：then 直接接收 data
axios.get('/posts/1').then(data => console.log('简化后的数据：', data)).catch(err => console.log('错误：', err));

（3）并发请求

使用 axios.all 和 axios.spread 同时发送多个请求，等待所有请求完成后处理结果：

javascript

运行

// 定义两个请求函数
function getPosts() {return axios.get('/posts');
}
function getComments() {return axios.get('/comments');
}// 并发执行两个请求
axios.all([getPosts(), getComments()]).then(axios.spread((postsRes, commentsRes) => {// 两个请求都成功后执行console.log('文章列表：', postsRes.data);console.log('评论列表：', commentsRes.data);})).catch(err => console.log('并发请求错误：', err));