Axios: HTTP请求界的扛把子

pojin (ID: 1)

头衔：论坛坛主

等级：究级天王[荣誉]

积分：2825
发帖：230 篇
来自：保密
注册：2023-12-09 09:36:49
造访：2026-05-02 12:05:56

[ 第 1 楼 ] 501

这是一个框架，一个啥框架呢？一个封装的很好的HTTP协议库。

在浏览器环境下，它可以基于浏览器的内置对象XHR发送HTTP请求，而在Node.JS环境中，它又有可以使用Node.JS的HTTP模块完成同样的事。

假如我们封装原始的XHR对象，既要考虑各种HTTP的处理细节又要考虑功能易用，真的不如使用这些被造好的轮子。

而且Axios的使用很广泛，在Vue项目中你能看到它，在React中也能，说明它是一款非常成功的HTTP的工具库，是这个领域内的扛把子。

本篇文章写了一个简单的示例，调用我们的mockmock项目，初步体验一把使用axios的快感。后续如果有机会做工程化的项目，我们再来用axios封装一个完整度高的工具类。

根据下面这两篇文章如何搭建一个Mock服务？和让AI帮我们封装一个Ajax请求，我们搭建实现了两个Mock接口，接口的本地访问路径如下：

1. POSt: http://localhost:3000/api/test/post
2. GET: http://localhost:3000/api/test/get

开始实验：

接下来我们就来创建项目，找个空地创建前端目录，它有一个响亮的名字: axiostest

在这个目录里面创建一个文件 index.html

axios提供两种API，一种是使用其核心函数axios；两外一种使用它封装好的快捷方法axios.get，axios.post等等，这些分别实现了HTTP的GET、POST等等方法。我们两种方法都来试下。

1. 直接使用核心函数axios

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Axios试验区</title>
    
    <script src="https://unpkg.com/axios@1.13.4/dist/axios.min.js"></script>
</head>
<body>
    Axios试验区
    <script>
        const url = 'http://localhost:3000/api/test/post';
        axios(url, {
            method: 'POST',
            //请求的头信息
            headers: {
                // 'Content-Type': 'application/x-www-form-urlencoded',
                'Content-Type': 'application/json'

},
            // 通过请求头携带数据
            params: {
                username: 'Halou'
            },
            //通过请全体携带数据
            data: {
                age: '12'
            },
            timeout: 2000//设置请求超时时间为2秒，因为mockmock项目设置了1秒的延迟,所以这里我设置的比较长
        }).then(response => {
            console.log(response);
        }).catch(err => {
            console.log(err);
        })
    </script>
</body>
</html>

[您可以先修改代码再运行]

2. 分别调用axios的GET/POST方法

[您可以先修改代码再运行]

运行项目：

运行项目验证结果
后端项目的启动
后端mockmock的启动方式
npm run dev

前端项目的启动
前端使用Live Server启动，启动后查看浏览器Network控制面板和mockmock后台日志即可。

2026-04-04 19:43:10

IP：已设置保密