在 Vue 3 的项目开发中，使用 Axios 进行 HTTP 请求是非常常见的作法，为了更方便开发者更高效的进行代码编写和项目的维护，可以通过再次封装 Axios 来实现。
在本文中，博主将详细指导你如何在自己的 Vue 3 项目中使用 Axios 二次封装 request 请求。
1.安装 Axios
首先，确保我们的 Vue 3 项目已经安装了 Axios 。
如果尚未安装 Axios ，则可以定位到项目根目录下 (与src目录同级) ，运行命令行：
# 使用 npm 包管理器
npm install axios
# 使用 yarn 包管理器
npm add axios
# 使用 pnpm 包管理器
pnpm install axios 随后，我们查看 package.json 配置文件中是否包含了 Axios 的配置信息：
2.创建请求封装模块
在项目中创建一个单独的模块用来封装 Axios 请求。(博主这里是 src/utils/request.ts)
第一步：创建一个新的 Axios 实例
/* request.ts 这里博主用的是 TypeScript */
// 引入 Axios 库的功能，AxiosInstance 是 Axios 中自带的接口类型
import axios, { AxiosInstance } from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus'; // 按需引入 Element-Plus 组件
// 第一步：创建一个新的 Axios 实例
const service: AxiosInstance = axios.create({
// 这里博主直接引用了开发环境配置文件中的路径, 也可自定义成网络地址
baseURL: import.meta.env.VITE_API_URL, // 或 http://${host}:${port}
timeout: 5000, // 设置请求超时，一般来说为 5 秒
// 设置请求头类型：若非文件传输，一般情况下为 json
headers: { 'Content-Type': 'application/json' }, // 传输文件: multipart/form-data
/* 自定义 Axios 的参数序列化过程
* paramsSerializer 是 Axios 中的一个配置项，用于定义在发送 GET 请求时如何序列化 URL 参数
* serialize 是一个自定义的方法，它接收一个 params 对象作为参数，并返回一个字符串
* 在这里，它使用了 qs（可能是 querystring 库）来将参数对象 params 序列化为一个 URL 查询字符串
* 这里的 qs.stringify 函数是一个用于序列化对象为 URL 查询字符串的方法
*/
paramsSerializer: {
serialize(params) {
return qs.stringify(params, { allowDots: true });
}
}
})
第二步：创建请求拦截器
// request.ts 文件中
/*
* 已经完成了第一步
*/
// 第二步：创建请求拦截器
service.interceptors.request.use(
(config) => {
// 这里可以在我们发送 request 网络请求前，为我们的 request 请求做一些配置
// 例如：将 token 携带在请求头中
config.headers!['Authorization'] = `Token ${Session.get('token')}`;
return config
},
(error) => {
// 错误调试
return Promise.reject(error)
}
)第三步：创建响应拦截器
/* request.ts 文件中 */
/*
* 已完成第一步
*
* 已完成第二步
*/
// 第三步：创建请求拦截器
service.interceptors.response.use(
(response) => {
// 在这里，你可以对从后端拿到的数据进行处理
const res = response.data;
if (res.code === 400 || res.code === 401 || res.code === 403) {
// 如果没有权限，可以清除浏览器中缓存的 session 信息
Session.clear(); // 清除浏览器全部临时缓存
window.location.href = '/'; // 去登录页
ElMessageBox.alert('你已被登出，请重新登录', '提示', {})
.then(() => { })
.catch(() => { });
return Promise.reject(service.interceptors.response);
} else {
return res;
}
},
(error) => {
// 对响应错误做点什么
if (error.message.indexOf('timeout') != -1) {
ElMessage.error('网络超时');
} else if (error.message == 'Network Error') {
ElMessage.error('网络连接错误');
} else {
if (error.response.data) ElMessage.error(error.response.statusText);
else ElMessage.error('接口路径找不到');
}
return Promise.reject(error);
}
)第四步：导出 Axios 实例
/* request.ts 文件中 */
/*
* 已完成了上述三个步骤
*/
// 导出 axios 实例
export default service;完整代码如下：
import axios, { AxiosInstance } from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Session } from '/@/utils/storage';
import qs from 'qs';
// 配置新建一个 axios 实例
const service: AxiosInstance = axios.create({
baseURL: import.meta.env.VITE_API_URL,
timeout: 50000,
headers: { 'Content-Type': 'multipart/form-data' },
paramsSerializer: {
serialize(params) {
return qs.stringify(params, { allowDots: true });
},
},
});
// 添加请求拦截器
service.interceptors.request.use(
(config) => {
// 在发送请求之前做些什么 token
if (Session.get('token')) {
config.headers!['Authorization'] = `DavyJonesZ ${Session.get('token')}`;
}
return config;
},
(error) => {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 添加响应拦截器
service.interceptors.response.use(
(response) => {
// 对响应数据做点什么
const res = response.data;
if (res.code && res.code !== 0) {
// `token` 过期或者账号已在别处登录
if (res.code === 401 || res.code === 4001) {
Session.clear(); // 清除浏览器全部临时缓存
window.location.href = '/'; // 去登录页
ElMessageBox.alert('你已被登出，请重新登录', '提示', {})
.then(() => { })
.catch(() => { });
return Promise.reject(service.interceptors.response);
} else {
return res;
}
} else {
return res;
}
},
(error) => {
// 对响应错误做点什么
if (error.message.indexOf('timeout') != -1) {
ElMessage.error('网络超时');
} else if (error.message == 'Network Error') {
ElMessage.error('网络连接错误');
} else {
if (error.response.data) ElMessage.error(error.response.statusText);
else ElMessage.error('接口路径找不到');
}
return Promise.reject(error);
}
);
// 导出 axios 实例
export default service;
3. 使用
完成上述对于 Axios 的二次封装后，我们就可以在其他地方进行调用了
/* Vue 3 接口工具类：login.ts 文件中 */
import request from '/@/utils/request';
// Login Api
export function login(data: object) {
return request({
url: '/user/login',
method: 'POST',
data
})
}最后，只需要在Vue组件中，引入 login.ts 文件，并调用其 login 方法，就可以实现与后端接口的通信啦！(大功告成！！！)
