Axios 这个名字，前端开发者应该都耳熟能详。它是一个基于 Promise 的 HTTP 请求库，能够同时在浏览器和 Node.js 环境中高效运行。简而言之，它用一套简洁优雅的 API 帮助你发起 GET、POST、PUT、DELETE 等常见请求，并将返回数据自动解析为 JavaScript 对象。在现代前端工程化项目中，其使用率几乎达到 99%，毫不夸张。接下来，我们通过一个实际案例来演示：用 Axios 调用 Apifox 生成的 Mock 数据。
如何安装 Axios
使用 Axios 之前，需要确保本地已安装 Node.js 环境。接着，从以下三条命令中任选一条执行即可完成安装：
npm install axiosyarn add axiospnpm install axios上述命令为局部安装模式，会将 Axios 添加到当前项目的 node_modules 目录中。这是最推荐的方式——每个项目独立管理依赖，版本清晰，互不干扰。如果需要全局安装，可在命令后添加 -g 或 --global 参数：
pnpm install -g axios安装完成后，新建一个 .js 文件用于发送 HTTP 请求。基础代码框架如下：
接口数据的 Mock 模拟
在接口测试阶段，无需等待后端完成所有接口开发。此时，Mock 数据模拟就能发挥作用。我们以 Apifox 示例项目中的 Mock 数据为例——只需下载 Apifox 并新建项目，即可直接调用 Mock 接口。
发起 HTTP 请求的实践
开始之前，先引入 Axios 库，并定义一个全局 baseUrl 变量，便于后续调用：
const $http = require("axios");
/* baseUrl: 请求路径，可从 Apifox 云端 Mock 页面获取 */
const baseUrl = "https://mock.apifox.cn/......";GET 请求示例
以下是一个 GET 请求的实例：
// 发起 GET 请求
$http.get(`${baseUrl}/pet/1`).then((res) => {
console.log(res.data);
});响应结果类似如下：
POST 请求示例
POST 请求用于新增数据：
// 发起 POST 请求
$http.post(`${baseUrl}/pet`, {
name: "太酷啦",
status: "sold",
}).then((res) => {
console.log(res.data);
});PUT 请求示例
PUT 请求用于更新已有资源：
// 发起 PUT 请求
$http.put(`${baseUrl}/pet`, {
name: "test",
}).then((res) => {
console.log(res.data);
});DELETE 请求示例
DELETE 请求用于删除指定数据：
$http.delete(`${baseUrl}/pet/2`) // 删除 id 为 2 的数据记录
.then(function (res) {
console.log(res.data);
});总结与展望
以上即是 Axios 最基础的用法。在实际的前端工程化项目中，Axios 通常会被封装为独立模块，便于团队统一调用与管理。如需深入掌握，可直接查阅 Axios 官方文档。此外，在后端接口尚未就绪时，Mock 数据模拟已成为前端业务测试的标准实践。Apifox 提供的高级 Mock 功能恰好精准地解决了这一痛点，有效提升前后端的协作效率。
