uniapp request 封装实战:从配置到调用的完整指南
本文详细介绍如何在 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 地址为准)。

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

进入该文件后,开始编写代码。代码实现需参考 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 封装的教程介绍完毕。如需了解更多相关内容,请搜索本站过往文章或继续浏览后续文章,感谢大家的支持!
为什么叫JavaScript:语言命名由来及与Java的历史渊源
2026-11-05 11:37:48
JS获取当前时间年月日时分秒并格式化为YYYY-MM-DD HH:mm:ss
2026-11-04 21:25:21
不同语言间JS与Java/Python加密结果不一致怎么办
2026-11-04 18:27:23
Mock.js 拦截 Axios 和 Fetch 请求的原理与配置方法
2026-11-04 08:13:59
JS怎么获取当前日期并格式化为YYYY-MM-DD
2026-11-03 18:47:03
