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 实例

javascript 复制代码
/* 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 });
		}
	}
})

第二步:创建请求拦截器

javascript 复制代码
// request.ts 文件中

/*
 * 已经完成了第一步
 */

// 第二步:创建请求拦截器
service.interceptors.request.use(
    (config) => {
        // 这里可以在我们发送 request 网络请求前,为我们的 request 请求做一些配置
        // 例如:将 token 携带在请求头中
        config.headers!['Authorization'] = `Token ${Session.get('token')}`;
        
        return config
    },
    (error) => {
        // 错误调试
        return Promise.reject(error)
    }
)

第三步:创建响应拦截器

javascript 复制代码
/* 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 实例

javascript 复制代码
/* request.ts 文件中 */

/*
 * 已完成了上述三个步骤
 */

// 导出 axios 实例
export default service;

完整代码如下:

javascript 复制代码
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的二次封装后,我们就可以在其他地方进行调用了

javascript 复制代码
/* 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 方法,就可以实现与后端接口的通信啦!(大功告成!!!)

相关推荐
慧一居士21 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead23 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_7 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js