关于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封装内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 纯js实现手风琴效果代码

    纯js实现手风琴效果代码

    这篇文章主要为大家详细介绍了纯js实现手风琴效果代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • Meta 标签生成器

    Meta 标签生成器

    非常不错的可以生产标签的小东西
    2008-04-04
  • 深入详解JS函数的柯里化

    深入详解JS函数的柯里化

    JavaScript作为一种弱类型语言,它的隐式转换是非常灵活有趣的。当我们没有深入了解隐式转换的时候可能会对一些运算的结果会感动困惑,比如4 + true = 5。当然,如果对隐式转换了解足够深刻,能够提高对js的使用能力。这里分享一下,函数在隐式转换中的一些规则
    2021-06-06
  • JavaScript作用域与作用域链使用重点讲解

    JavaScript作用域与作用域链使用重点讲解

    当代码在一个环境中执行时,会创建变量对象的一个作用域链,作用域链的用途是保证对执行环境有权访问的所有变量和函数的有序访问,下面这篇文章主要给大家介绍了关于JavaScript作用域与作用域链的相关资料,需要的朋友可以参考下
    2022-10-10
  • JS前端千万级弹幕数据循环优化示例

    JS前端千万级弹幕数据循环优化示例

    这篇文章主要为大家介绍了JS前端一千万条弹幕数据循环优化示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • javascript跨域方法、原理以及出现问题解决方法(详解)

    javascript跨域方法、原理以及出现问题解决方法(详解)

    javascript出于安全方面的考虑,不允许跨域调用其他页面的对象。但是在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。跨域简单的理解就是因为javascript同源策略的限制,a.com域名下的js无法操作b.com 或者是c.a.com域名下的对象
    2015-08-08
  • 对象题目的一个坑 理解Javascript对象

    对象题目的一个坑 理解Javascript对象

    这篇文章主要介绍了Javascript对象,特别为大家分享了对象题目的一个坑,提供了解题思路,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • JavaScript事件用法浅析

    JavaScript事件用法浅析

    这篇文章主要介绍了JavaScript事件用法,较为详细的分析了javascript事件流、事件类型及事件操作技巧,需要的朋友可以参考下
    2016-10-10
  • JavaScript判断数据类型有几种方法及区别介绍

    JavaScript判断数据类型有几种方法及区别介绍

    这篇文章主要介绍了JavaScript判断数据类型有几种方法及区别介绍,本文给大家分享多种方法通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-09-09
  • 微信小程序canvas分享海报功能

    微信小程序canvas分享海报功能

    这篇文章主要为大家详细介绍了微信小程序canvas分享海报功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10

最新评论