###
Vue 中
Axios 的
二次封装
为了提升代码的复用性和可维护性，可以对
Axios 进行
二次封装。以下是基于
Vue 和 TypeScript 的实现方案：
####
封装结构设计
在 `src` 根目录下创建一个名为 `utils` 的文件夹，并在其内部创建 `request.ts` 文件用于
封装 Axios。
---
#### 1. 安装依赖
确保已安装
Axios 库：
```bash
npm install
axios
```
如果需要支持环境变量配置（如开发环境和生产环境），还需安装 `dotenv` 或者
使用 Vue 自带的 `.env` 配置功能。
---
#### 2. 创建
Axios 实例并设置基础选项
通过自定义
Axios 实例的方式，统一管理请求的基础 URL、超时时间以及其他通用配置。
```typescript
// utils/request.ts
import
axios, {
AxiosInstance,
AxiosRequestConfig,
AxiosResponse } from '
axios';
const service:
AxiosInstance =
axios.create({
baseURL: process.env.
VUE_APP_BASE_API || '/', // 动态读取 .env 文件中的 API 地址
timeout: 5000, // 设置默认超时时长
});
export default service;
```
[^1]
---
#### 3. 添加请求拦截器
在发送请求前处理一些公共逻辑，例如添加 Token 到请求头中或者显示加载动画。
```typescript
// 请求拦截器
service.interceptors.request.use(
(config:
AxiosRequestConfig):
AxiosRequestConfig => {
const token = localStorage.getItem('token'); // 假设 Token 存储在本地存储中
if (token && config.headers) {
config.headers['Authorization'] = `Bearer ${token}`;
}
return config;
},
(error): Promise<Error> => {
console.error('请求失败:', error);
return Promise.reject(error);
}
);
```
[^3]
---
#### 4. 添加响应拦截器
对接收到的数据进行预处理，例如判断返回的状态码是否正常，以及捕获异常情况下的错误提示。
```typescript
// 响应拦截器
service.interceptors.response.use(
(response:
AxiosResponse<any>): any => {
const res = response.data;
// 如果接口返回特定字段表示成功，则直接返回数据；否则抛出错误
if (res.code === 200) {
return res.data;
}
// 错误处理示例
switch (res.code) {
case 401:
console.warn('未授权，请重新登录');
break;
case 403:
console.warn('权限不足');
break;
default:
console.error(`未知错误(${res.code}):`, res.message);
}
return Promise.reject(new Error(res.message));
},
(error): Promise<Error> => {
console.error('网络错误或服务器异常:', error);
if (error.response) {
switch (error.response.status) {
case 404:
console.error('资源不存在');
break;
case 500:
console.error('服务器内部错误');
break;
default:
console.error('其他 HTTP 错误');
}
}
return Promise.reject(error);
}
);
```
---
#### 5. 提供对外方法
为了让业务模块更方便地调用
封装后的
Axios 方法，可以在同一文件中暴露常用的 GET/POST 请求工具函数。
```typescript
interface RequestOptions extends
AxiosRequestConfig {
isShowLoading?: boolean; // 是否展示加载动画，默认 true
}
class RequestService {
public static get<T>(url: string, params?: object, options?: RequestOptions): Promise<T> {
return service.get(url, { ...options, params });
}
public static post<T>(url: string, data?: object, options?: RequestOptions): Promise<T> {
return service.post(url, data, options);
}
}
export default new RequestService();
```
---
#### 6.
使用封装好的服务类
在实际组件中可以直接导入
封装的服务类来发起请求，无需重复编写复杂的
Axios 调用代码。
```typescript
<script lang="ts" setup>
import { ref } from '
vue';
import request from '@/utils/request';
const userInfo = ref(null);
async function fetchUserData() {
try {
const result = await request.get('/api/user/info', {});
userInfo.value = result;
} catch (err) {
console.error('获取用户信息失败:', err);
}
}
</script>
<template>
<div>
<button @click="fetchUserData">获取用户信息</button>
<pre>{{ JSON.stringify(userInfo, null, 2) }}</pre>
</div>
</template>
```
[^2]
---
#### 总结
通过对
Axios 的
二次封装，不仅可以减少冗余代码量，还能集中管理和优化请求流程。这种做法特别适合大型项目，能够显著降低后期维护成本。
---
本文详细介绍了在项目中对Axios进行二次封装的过程，包括如何通过拦截器添加公共参数、签名、公共header，以及错误码的统一处理。此外，还分享了如何根据不同环境配置API，确保项目的高效运行。
扫一扫
1182
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
