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 方法，就可以实现与后端接口的通信啦！(大功告成！！！)