uniapp request 封装实战:从配置到调用的完整指南

作者:阿沐时间:2026-10-30 21:29:59浏览:315

本文详细介绍如何在 uniapp 中封装 request 模块以简化接口调用。通过获取本地 IP 地址并配置 baseUrl、header 等公共参数,实现统一的请求处理。教程涵盖从创建 request.js 文件到引入使用的完整步骤,帮助开发者减少重复代码,提升开发效率。

uniapp request 封装背景与目标

参考前端老张的 uniapp 视频内容,在完成 Node.js 学习后,即可开始进行接口对接工作。由于接口对接过程中需要频繁写入相同的 URL 和公共数据,因此对 request 进行封装是必要的,这能有效减少代码冗余。接下来直接开始具体操作。

获取本地 IP 地址与创建配置文件

首先,本教程基于 Windows 系统环境。由于涉及本地数据交互,需要通过 ipconfig 命令查询本机 IP 地址:

IP 地址格式通常为 http://192.xxx.x.xxx(具体格式可能因网络环境而异,请以实际获取的 IPv4 地址为准)。

uniapp request 封装背景与目标

获取到 IP 地址后,在项目的 common 目录下创建 request.js 文件。

uniapp request 封装背景与目标

进入该文件后,开始编写代码。代码实现需参考 uniapp 官方文档中关于 #uni.request(OBJECT) 的配置说明。

request.js 核心代码实现

export default{
	common:{
		baseUrl:"http://192.xxx.xxxx:3000/api",
		data:{},
		header:{
			"Content-type":"application/json",
			"Content-type":"application/x-www-form-urlencoded"
		},
		methods:"GET",
		dataType:"json"
			},
	request(options={}) {
		options.url =this.common.baseUrl+options.url;
		options.data =this.common.data || options.data;
		options.header =this.common.header || options.header;
		options.method =this.common.method || options.method;
		options.dataType =this.common.dataType || options.dataType;
		return new Promise((res,rej)=>{
			uni.request({
				...options,
				success:(result) =>{
					if(result.statusCode != 200){
						return rej();
					}
					let data =result.data;
					res(data)
					}
			})
		})
		
	}
}

引入封装模块与使用示例

最后,在页面中引入之前编写的 request.js 文件,并在具体业务逻辑中配置使用,即可完成整个封装流程。

uniapp request 封装背景与目标

uniapp request 封装背景与目标

总结

至此,关于 uniapp request 封装的教程介绍完毕。如需了解更多相关内容,请搜索本站过往文章或继续浏览后续文章,感谢大家的支持!

作者最新文章