【uni-app+Vue3】 API请求封装：让接口调用更便捷

时间：2024-07-10 10:07:31

前言：uni-app是一款基于Vue.js框架的跨平台开发工具，可以将代码编译成H5、小程序、App等不同平台的应用。在进行uni-app开发时，网络请求是必不可少的环节。为了方便开发，我们可以封装一些网络请求方法，以便在多个页面中复用，并且可以统一处理错误信息等问题，提高开发效率和代码质量。本文将介绍如何封装网络请求方法。

????????文章目录

一、封装 uni.request 请求

二、封装对应的 api 文件

三、在相关页面使用封装的api

总结

一、封装 uni.request 请求

在根目录创建 until 目录，在目录下创建 request.js 文件，编写以下代码

// 全局请求封装
const base_url = 'http://localhost:996'
// 需要修改token，和根据实际修改请求头
export default (params) => {
	let url = params.url;
	let method = params.method || "get";
	let data = params.data || {};
	let header = {}
	if (method == "post") {
		header = {
			'Content-Type': 'application/json'
		};
	}
	// 获取本地token
	if (uni.getStorageSync("token")) {
		header['Authorization'] = 'Bearer ' + uni.getStorageSync("token");
	}

	return new Promise((resolve, reject) => {
		uni.request({
			url: base_url + url,
			method: method,
			header: header,
			data: data,
			success(response) {
				const res = response
				// 根据返回的状态码做出对应的操作
				//获取成功
				console.log(res.statusCode);
				if (res.statusCode == 200) {
					resolve(res.data);
				} else {
					uni.clearStorageSync()
					switch (res.statusCode) {
						case 401:
							uni.showModal({
								title: "提示",
								content: "请登录",
								showCancel: false,
								success(res) {
									setTimeout(() => {
										uni.navigateTo({
											url: "/pages/login/index",
										})
									}, 1000);
								},
							});
							break;
						case 404:
							uni.showToast({
								title: '请求地址不存在...',
								duration: 2000,
							})
							break;
						default:
							uni.showToast({
								title: '请重试...',
								duration: 2000,
							})
							break;
					}
				}
			},
			fail(err) {
				console.log(err)
				if (err.errMsg.indexOf('request:fail') !== -1) {
					wx.showToast({
						title: '网络异常',
						icon: "error",
						duration: 2000
					})
				} else {
					wx.showToast({
						title: '未知异常',
						duration: 2000
					})
				}
				reject(err);

			},
			complete() {
				// 不管成功还是失败都会执行
				uni.hideLoading();
				uni.hideToast();
			}
		});
	}).catch((e) => {});
};

二、封装对应的 api 文件

在实际项目中，我们也会根据上述请求，封装对应的 api ,所以，我们在根目录下创建 api ,里面放与项目相关的 api

// 引入 request 文件
import request from '@/utils/request'

// 以下 api 为博主项目示例，实际与项目相匹配

// 分页查询学习列表
export const pageStudyInfo = (params) => {
    return request({
        url: '/study/studyInfo/page',
        method: 'get',
        data: params
    })
}
// 查询学习列表
export const listStudyInfo = (params) => {
    return request({
        url: '/study/studyInfo/list',
        method: 'get',
        data: params
    })
}


// 获取学习列表详细信息
export const studyInfoById= (id) => {
    return request({
        url: '/study/studyInfo/'+id,
        method: 'get',
    })
}

// 增加学习列表
export const saveStudyInfo = (params) => {
    return request({
        url: '/study/studyInfo',
        method: 'post',
        data: params
    })
}

// 修改学习列表
export const updateStudyInfo = (params) => {
    return request({
        url: '/study/studyInfo',
        method: 'put',
        data: params
    })
}

// 删除学习列表
export const deleteStudyInfo = (id) => {
    return request({
        url: '/study/studyInfo/delete?id='+id,
        method: 'delete',
    })
}

三、在相关页面使用封装的api

以 Vue3 为例

<script setup>
    // 在页面中导入相关 api 
	import {pageStudyInfo,listStudyInfo} from "@/api/study/info";

	// 定义存储请求的结果
	const studyList = ref([]);

    // 也买你加载完毕执行
	onMounted(() => {
        // 调用函数
		getStudyList();
	})
	// 封装函数，调用 api
	const getStudyList = async () => {
		let res = await pageStudyInfo(queryParams);
		console.log(res.data.records);
		studyList.value = res.data.records;
	}
</script>

总结

  • 封装请求是指在传输层或应用层对请求数据进行包装，以便在网络中传输和处理。封装请求的好处在于提高数据的安全性、减少网络传输的开销、方便协议的扩展和升级等。
  • 在封装请求时，需要考虑请求的类型、格式、大小、传输协议、加密方式等因素。常见的封装请求的方式有URL编码、JSON格式、XML格式、HTTP协议等。
  • 总之，封装请求是现代网络应用中非常重要的一个环节。通过良好的封装请求，可以保证数据的安全和可靠性，从而提高应用的性能和用户体验。

好了，本文就到这里吧，点个关注再走嘛~ 

???? 个人简介：7年开发经验，某大型国企前端负责人，信息系统项目管理师、****优质创作者、阿里云专家博主，华为云云享专家，分享前端相关技术与工作常见问题~
???? 作    者：前端菜鸟的自我修养❣️
???? 专    栏：uniApp与微信小程序
???? 若有帮助，还请 关注➕点赞➕收藏  ，不行的话我再努努力????????????  

 更多专栏订阅推荐：

???? 前端工程搭建
???? vue从基础到起飞

???? javascript深入研究

✍️ GIS地图与大数据可视化

✈️ 前端常见问题与避坑指南

相关文章