AJAX 全攻略：多种方式导入 Axios，掌握高效数据请求！

在 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，如果有问题，欢迎留言交流！🚀