前言：

在现代前端开发中，网络请求是不可避免的核心功能之一。无论是获取后端数据、提交表单信息，还是与第三方 API 交互，高效且可靠的 HTTP 请求库至关重要。axios 作为一款基于 Promise 的 HTTP 客户端，凭借其简洁的 API 设计、强大的拦截器机制以及广泛的浏览器和 Node.js 兼容性，成为开发者首选的工具之一。

axios 不仅提供了基础的 GET、POST 等请求方法，还支持请求和响应的拦截、取消请求、自动转换 JSON 数据等特性，极大简化了开发流程。然而，在实际项目中直接使用原生 axios 可能会导致代码冗余、维护困难等问题。通过合理的封装，可以统一处理错误、设置全局配置、管理请求与响应逻辑，从而提升代码的可读性和可维护性。

本文将详细介绍 axios 的基本使用方法，并探讨如何基于实际业务需求进行二次封装，使其更符合项目规范，同时兼顾灵活性和扩展性。无论是初学者还是有一定经验的开发者，都能从中获得实用的技巧和最佳实践。

1.axios请求接口

1.下载

npm install axios -S

2.引入

import axios from 'axios';

3.使用

axios有两种使用方式，如下：

1.axios.'请求方式'
比如：axios.get()  axios.post2.axios({url:'请求url',method:'请求方式，不给默认get请求',data:'post传值方式',params:'get传值方式'
}).then(res => {console.log( res ); // 后端给前端的数据
})

比如我在优启梦API上找的免费API接口写的例子，如下：

<template><div class="app">{{ data }}</div>
</template><script setup>
import axios from 'axios';
import { onMounted, ref } from 'vue';const data = ref('')onMounted(() => {axios({url:'https://api.uomg.com/api/rand.qinghua?format=json',method:'get'}).then(res=>{data.value = res.data.content})
})
</script>

2.axios的二次封装

axios的二次封装解决了什么问题：

1.请求的url统一管理。

2.配置统一的请求头。

说白了axios的二次封装是为了方便管理和维护，首先我们需要在src目录下去创建一个工具文件夹（utils），在该文件夹下去创建一个js文件用来封装axios，命名为resquest.js。

创建好之后，第一步就是要引入axios。第二步需要创建axios对象，用来管理统一的url路径。第三步需要设置请求拦截器，它可以在请求成功前去完成一些操作，比如添加请求头、设置loading动画等等。第四步是设置响应拦截器，它是请求完成了，后端返回给前端的数据，可以去处理http状态码等等。最后将我们创建的axios对象导出即可。基本代码如下：

// 1.引入axios
import axios from "axios";// 2.创建axios对象
const service = axios.create({baseURL: 'https://api.uomg.com'
});// 3.设置请求拦截器 请求前进行一些操作 比如添加请求头、设置loading动画等
service.interceptors.request.use(config => {return config;
}, err => {Promise.reject(error)
})// 4.设置响应拦截器 后端给前端返回数据 可以处理http状态码
service.interceptors.response.use((response) => {if (response.status === 200) {return response.data}},err => {return Promise.reject(new Error(err.response.data))}
)export default service

封装好之后，我们就可以对请求代码进行修改，代码如下：

<template><div class="app">{{ data }}</div>
</template><script setup>
import { onMounted, ref } from 'vue';
import request from './utils/request';const data = ref('')onMounted(() => {request({// 只需要添加参数url: '/api/rand.qinghua?format=json',}).then(res => {data.value = res.content})
})
</script>

3.解偶

当项目中可能一个请求会在多个地方用到是，就需要统一管理。

在utils文件夹下新建api文件夹的目的在于将接口请求与业务逻辑彻底解耦，实现接口的集中管理和复用。这种架构设计主要解决以下问题：

接口复用性：避免同一接口在不同组件重复定义
维护便捷性：接口路径或参数变更时只需修改单个文件
语义化调用：通过命名清晰的函数替代原始URL字符串
类型提示支持：配合TypeScript可获得更好的代码提示

import request from '../request';export function getQingHua(){return request({url: '/api/rand.qinghua?format=json',})
}

修改原组件代码为：

<template><div class="app">{{ data }}</div>
</template><script setup>
import { onMounted, ref } from 'vue';
import { getQingHua } from './utils/api/course';const data = ref('')onMounted(() => {getQingHua().then(res => {data.value = res.data})
})
</script>

这种架构设计使项目具备以下优势：

接口与业务逻辑完全分离
团队成员协作更规范
接口变更影响范围可控
代码可测试性增强
类型系统更完善

结语：

axios 作为现代前端开发的核心工具，其灵活性和强大功能为 HTTP 请求处理提供了高效解决方案。通过原生使用和二次封装，开发者能够根据项目需求实现从基础到进阶的请求管理。封装后的代码不仅提升了可维护性，还通过统一配置和拦截机制增强了健壮性。接口解耦进一步优化了项目结构，使团队协作更加规范。掌握这些技巧将显著提升开发效率和代码质量，为复杂应用奠定坚实基础。