关于uniapp的request封装保姆级教程

 更新时间:2023年07月07日 08:33:14   作者:还在持续努力中  
这篇文章主要给大家介绍了关于uniapp的request封装保姆级教程,request是基于uni-app框架封装的一个网络请求库,可以用于发送http请求和处理响应数据,需要的朋友可以参考下

看了前端老张的uniapp视频,在学完nodejs之后就可以进行接口对接,但是接口对接需要频繁的写入相同的url和一些相同的数据,所以我们需要进行request的封装,以此减少我们的代码量,废话不多说,直接开始

1.首先,我使用的是windows的,因为是本地数据,使用ipconfig查询自己的ip地址:

格式为:http://192.xxx.x.xxx(也有不一样的,看自己的IPv4就行)

2.拿到我们的ip地址之后,我们在common目录下创建我们的request.js文件

3.进入到文件之后我们开始写代码,基于uniapp文档里#uni.request(OBJECT)的配置作为参考

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)
					}
			})
		})
		
	}
}

4.引入之前写的request.js文件,之后在页面上配置使用就完成了

总结

到此这篇关于uniapp的request封装保姆级教程的文章就介绍到这了,更多相关uniapp的request封装内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • javascript比较两个日期相差天数的方法

    javascript比较两个日期相差天数的方法

    这篇文章主要介绍了javascript比较两个日期相差天数的方法,涉及javascript针对日期的转换与比较的相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • js利用FileReader实现图片转base64格式并上传预览头像

    js利用FileReader实现图片转base64格式并上传预览头像

    本文主要介绍了js利用FileReader实现图片转base64格式并上传预览头像,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • js进行表单验证实例分析

    js进行表单验证实例分析

    这篇文章主要介绍了js进行表单验证的方法,实例分析了各种常见的js表单验证技巧,需要的朋友可以参考下
    2015-02-02
  • JavaScript读取本地文件常用方法流程解析

    JavaScript读取本地文件常用方法流程解析

    这篇文章主要介绍了JavaScript读取本地文件常用方法流程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-10-10
  • 用js遍历 table的脚本

    用js遍历 table的脚本

    js遍历table的所有元素的代码,方便我们控制table的所有元素,颜色,样式等
    2008-07-07
  • JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例

    JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例

    这篇文章主要介绍了JavaScript求一个数组中重复出现次数最多的元素及其下标位置,涉及javascript数组元素遍历、判断、正则过滤、追加等相关操作技巧,需要的朋友可以参考下
    2018-07-07
  • 详解ES6中的 Set Map 数据结构学习总结

    详解ES6中的 Set Map 数据结构学习总结

    这篇文章主要介绍了详解ES6中的 Set Map 数据结构学习总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 基于zepto.js实现手机相册功能

    基于zepto.js实现手机相册功能

    这篇文章主要为大家详细介绍了基于zepto.js实现手机相册功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • jquery、js操作checkbox全选反选

    jquery、js操作checkbox全选反选

    全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下
    2014-03-03
  • JavaScript运动减速效果实例分析

    JavaScript运动减速效果实例分析

    这篇文章主要介绍了JavaScript运动减速效果,模拟了物体做减速运动的效果,以两个实例形式分析了javascript实现物体做减速运动的实现技巧,涉及javascript动态操作页面元素样式及数学运算的方法,非常简洁实用,需要的朋友可以参考下
    2015-08-08

最新评论