在 Web 开发中，前端需要向服务器请求数据，传统的 AJAX 方式过于繁琐，而 Axios 提供了更加优雅的解决方案。本文将详细介绍 Axios 的导入方式 、GET 和 POST 请求 、错误处理 ，并附带 完整代码示例，让你可以直接复制使用！
1. 什么是 Axios？为什么要用它？
Axios 是一个基于 Promise 的 HTTP 客户端，支持浏览器和 Node.js，它相比传统的 XMLHttpRequest 具有以下优点：
✅ 语法简洁 ：相比 XMLHttpRequest，代码更加清晰、简短。
✅ 支持 Promise ：可以使用 async/await，让代码更加优雅。
✅ 自动解析 JSON ：不需要手动 JSON.parse() 解析数据。
✅ 错误处理更简单 ：内置了 .catch() 处理错误响应。
✅ 支持请求和响应拦截器：可以对请求/响应进行统一处理。
2. Axios 的导入方式
2.1 通过 CDN 导入（适用于 HTML 页面）
如果你是直接在 HTML 页面中使用，可以通过 CDN 引入 Axios：
xml
<!-- 在 <head> 或 <body> 末尾加入 -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>2.2 通过 npm 安装（适用于 Vue/React/Node.js 项目）
如果你在 Vue、React 或 Node.js 项目中使用，可以通过 npm 安装 Axios：
npm install axios然后在 JavaScript 代码中引入：
javascript
const axios = require('axios'); // 适用于 Node.js
import axios from 'axios'; // 适用于 ES6 模块（Vue/React）3. 发送 GET 请求（获取数据）
假设你的服务器有一个 API，地址是：
ruby
http://127.0.0.1:3030/api/article/cates/getArticleCates我们使用 Axios 向该地址发送 GET 请求，并将返回的数据显示在网页上。
🔹 文件名：axios-get.html
xml
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Axios GET 请求示例</title>
</head>
<body>
<h2>文章列表</h2>
<button onclick="loadData()">获取文章数据</button>
<p id="result"></p>
<!-- 引入 Axios -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
function loadData() {
axios.get('http://127.0.0.1:3030/api/article/cates/getArticleCates')
.then(response => {
console.log(response); // 控制台打印返回的数据
let allData = response.data.data.map(item => {
return `ID: ${item.id}, 名称: ${item.name}, 别名: ${item.alias}, 创建时间: ${item.created_at}<br>`;
}).join('');
document.getElementById("result").innerHTML = allData;
})
.catch(error => {
console.error("请求失败", error);
});
}
</script>
</body>
</html>运行结果
当点击 "获取文章数据" 按钮时，页面会显示从服务器获取到的数据，例如：
yaml
ID: 1, 名称: 科技, 别名: tech, 创建时间: 2024-03-19
ID: 2, 名称: 生活, 别名: life, 创建时间: 2024-03-18
...4. 发送 POST 请求（提交数据）
如果你需要 向服务器提交数据 （例如添加文章分类），可以使用 post() 方法：
🔹 文件名：axios-post.html
xml
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Axios POST 请求示例</title>
</head>
<body>
<h2>提交文章分类</h2>
<input type="text" id="name" placeholder="分类名称">
<input type="text" id="alias" placeholder="分类别名">
<button onclick="submitData()">提交</button>
<p id="result"></p>
<!-- 引入 Axios -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
function submitData() {
let name = document.getElementById("name").value;
let alias = document.getElementById("alias").value;
axios.post("http://127.0.0.1:3030/api/article/cates/add", {
name: name,
alias: alias
})
.then(response => {
document.getElementById("result").innerHTML = "提交成功：" + JSON.stringify(response.data);
})
.catch(error => {
console.error("提交失败", error);
});
}
</script>
</body>
</html>运行结果
当用户输入分类名称和别名后，点击 "提交" 按钮，页面会显示服务器的响应信息：
json
提交成功：{"status":200,"message":"新增成功"}5. 处理请求错误
在实际开发中，可能会遇到 网络错误 、服务器错误 或 超时问题 。我们可以使用 .catch() 方法来处理错误：
vbscript
axios.get('http://127.0.0.1:3030/api/article/cates/getArticleCates')
.then(response => {
console.log("请求成功", response);
})
.catch(error => {
if (error.response) {
console.error("服务器返回错误：", error.response.status);
} else if (error.request) {
console.error("请求未收到响应：", error.request);
} else {
console.error("请求失败：", error.message);
}
});6. 总结
| 特点 | 传统 AJAX (XMLHttpRequest) | Axios |
|---|---|---|
| 代码简洁性 | 复杂 | ✅ 更简洁 |
Promise 支持 |
❌ 需要手动封装 | ✅ 内置支持 |
| JSON 解析 | ❌ 需要手动 JSON.parse() |
✅ 自动解析 |
| 错误处理 | 复杂 | ✅ 方便 .catch() |
| 请求拦截器 | ❌ 不支持 | ✅ 内置支持 |
现代开发推荐 Axios ，它让代码更加简洁、易维护，并且支持 async/await 语法，非常适合 Vue、React、Node.js 开发。
希望本教程能帮助你快速掌握 Axios，如果有问题，欢迎留言交流！🚀