一、Axios 核心定义
Axios 是一个基于 Promise 的 HTTP 客户端，专门用于浏览器和 Node.js 环境中发送 AJAX 请求。
- 本质：它不是原生 JS 的功能，而是一个第三方库（可以理解为对原生 AJAX（XHR/fetch）的封装和增强）。
- 核心目标：解决原生 AJAX（XHR）语法繁琐、fetch API 功能不全（如不支持超时、取消请求）的问题，让发送 HTTP 请求更简单、更易用。
- 底层：在浏览器端，Axios 底层还是用
XMLHttpRequest实现；在 Node.js 端，它用http模块实现，做到了前后端请求统一语法。
二、Axios 对比原生 AJAX 的核心优势
相比你刚学的原生 XHR/fetch，Axios 的优势非常明显：
- 语法极简：一行代码就能发送请求，无需手动创建 XHR 对象、配置状态监听。
- Promise 化：天然支持 Promise，可配合
async/await写出同步风格的异步代码，可读性更高。 - 功能丰富：内置请求 / 响应拦截、超时处理、取消请求、自动转换 JSON 数据、防止 CSRF 等。
- 跨平台：一套代码可在浏览器和 Node.js 中运行，无需适配。
- 错误处理更友好：统一的错误捕获机制，区分网络错误、请求错误、响应错误。
三、Axios 基本使用
1. 前置准备：引入 Axios
使用 Axios 前需要先引入，有两种方式：
-
浏览器端：通过 CDN 引入
<!-- 在HTML中引入Axios CDN --> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -
Node.js 端：先安装再引入
# 安装Axios npm install axios// 引入Axios const axios = require('axios'); // 或ES6模块化 import axios from 'axios';
2. 核心用法示例
（1）发送 GET 请求（最常用）
// 方式1：基础用法（then/catch）
axios.get('https://jsonplaceholder.typicode.com/todos/1')
.then(response => {
// 响应数据默认已解析为JSON，无需手动JSON.parse
console.log('请求成功：', response.data);
// 局部更新页面（和原生AJAX一样）
document.getElementById('result').innerHTML = `
<h3>任务标题：${response.data.title}</h3>
<p>是否完成：${response.data.completed ? '是' : '否'}</p>
`;
})
.catch(error => {
// 统一捕获错误（网络错误/响应错误）
console.error('请求失败：', error.message);
});
// 方式2：结合async/await（更优雅，ES7+）
async function getTodo() {
try {
const response = await axios.get('https://jsonplaceholder.typicode.com/todos/1');
console.log('请求成功：', response.data);
} catch (error) {
console.error('请求失败：', error.message);
}
}
// 调用函数
getTodo();
（2）发送 POST 请求（提交数据）
// 提交JSON数据
async function postData() {
try {
const response = await axios.post(
'https://jsonplaceholder.typicode.com/posts',
{ title: '测试标题', body: '测试内容', userId: 1 } // 请求体数据
);
console.log('提交成功，返回数据：', response.data);
} catch (error) {
console.error('提交失败：', error.message);
}
}
postData();
（3）自定义请求配置（高级用法）
// 统一配置请求（如设置基础URL、超时、请求头）
const axiosInstance = axios.create({
baseURL: 'https://jsonplaceholder.typicode.com', // 基础URL
timeout: 5000, // 超时时间（5秒）
headers: { 'Content-Type': 'application/json' } // 请求头
});
// 使用配置好的实例发送请求
axiosInstance.get('/todos/1')
.then(res => console.log(res.data))
.catch(err => console.error(err));
四、Axios 核心特性示例：拦截器
拦截器是 Axios 的核心亮点，可在请求发送前、响应返回后统一处理逻辑（比如添加 token、统一错误提示）：
// 请求拦截器：发送请求前执行（比如添加登录token）
axios.interceptors.request.use(
config => {
// 在请求头添加token
config.headers.Authorization = 'Bearer ' + localStorage.getItem('token');
return config;
},
error => {
return Promise.reject(error);
}
);
// 响应拦截器：响应返回后执行（比如统一处理错误）
axios.interceptors.response.use(
response => {
// 只返回响应数据，简化后续使用
return response.data;
},
error => {
// 统一提示错误
alert('请求出错：' + error.message);
return Promise.reject(error);
}
);
总结
- Axios 是封装后的 AJAX 工具库，基于 Promise，比原生 XHR/fetch 更易用、功能更全。
- 核心优势：语法简洁、支持 Promise/async-await、跨平台、内置拦截器 / 超时 / 取消请求等功能。
- 核心用法：
axios.get()/axios.post()发送请求，结合async/await编写优雅的异步代码，拦截器可统一处理请求 / 响应逻辑。 - 实际开发中，Axios 几乎是前端发送 HTTP 请求的首选工具，替代了繁琐的原生 AJAX 写法。
