Vue3项目基于Axios封装request请求

        在 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 秒// 设置请求头类型：若非文件传输，一般情况下为 jsonheaders: { '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) => {// 在发送请求之前做些什么 tokenif (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 方法，就可以实现与后端接口的通信啦！(大功告成！！！)