8.axios Http网络请求库（1）
一句话总结
Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js，帮助你轻松发送请求、接收响应。
Axios is a Promise-based HTTP client for the browser and Node.js, making it easy to send requests and handle responses.
📌 Axios 是什么？（What is Axios）
Axios 是一个 轻量级的 HTTP 请求库，支持浏览器和 Node.js 环境。它封装了 XMLHttpRequest（浏览器）和 http 模块（Node.js），让我们用更简单、统一的方式进行网络通信。
✨ 有什么特性？（Features of Axios）
• 支持 Promise API（可用 async/await）
• 自动转换 JSON 数据
• 拦截请求和响应（request/response interceptors）
• 支持请求取消（cancellation）
• 客户端防止 CSRF 攻击（自动设置 XSRF token）
• 可以设置请求超时、响应数据格式等
• 支持上传、下载进度监听
❓ 为什么需要 Axios？（Why use Axios）
• 原生 fetch 写法繁琐、对旧浏览器支持不好
• XMLHttpRequest 太底层，回调多，难维护
• Axios 提供统一接口、丰富功能，更适合现代开发
✅ Axios 的优点（Advantages of Axios）
• 使用简单，语法清晰
• 默认支持 JSON 数据的处理
• 跨平台支持（浏览器和 Node.js）
• 可配置性强，适合项目中进行统一封装
• 社区活跃，文档完善
🔧 可以做什么？（What can you do with Axios）
• 发送 GET / POST / PUT / DELETE 等 HTTP 请求
• 向后端接口提交表单、JSON、文件等数据
• 调用 REST API 接口并处理返回结果
• 构建基于服务端数据的前端应用（如 Vue / React 项目）
🛠️ 怎么使用？（How to use Axios）
- 安装（Install）
npm install axios
或
yarn add axios
- 基本用法（Basic Usage）
import axios from ‘axios’;
axios.get(‘https://api.example.com/data’)
.then(response => {
console.log(response.data); // 处理返回数据
})
.catch(error => {
console.error(error); // 处理错误
});
- 使用 async/await
async function fetchData() {
try {
const res = await axios.get(‘https://api.example.com/data’);
console.log(res.data);
} catch (err) {
console.error(err);
}
}
- 配置请求参数
axios.post(’/api/login’, {
username: ‘test’,
password: ‘123456’
}, {
headers: {
‘Content-Type’: ‘application/json’
},
timeout: 5000
});
- 拦截器使用（Interceptors）
axios.interceptors.request.use(config => {
config.headers.Authorization = ‘Bearer your_token’;
return config;
});
axios.interceptors.response.use(
response => response,
error => Promise.reject(error)
);