uni-app学习笔记

Uni-app网络请求

在uni中可以调用uni.request方法进行请求网络请求

---

在各个小程序平台运行时，网络相关的 API 在使用前需要配置域名白名单。

---

uni.request(OBJECT)

参数说明

参数名	默认值	说明
url		开发者服务器接口地址
data		请求的参数
header		设置请求的 header，header 中不能设置 Referer
method	GET	有效值见下方说明
timeout	30000	超时时间，单位 ms
dataType	json	如果设为 json，会尝试对返回的数据做一次 JSON.parse
success		收到开发者服务成功返回的回调函数
fail		接口调用失败的回调函数
complete		接口调用结束的回调函数（调用成功、失败都会执行）

method有效值

必须大写

1.GET
2.POST
3.PUT
4.DELETE
5.CONNECT
6.HEAD
7.OPTIONS
8.TRACE

success 返回参数

参数	说明
data	开发者服务器返回
statusCode	开发者服务器返回的 HTTP 状态码
header	开发者服务器返回的 HTTP Response Header

发送get请求

<button @click="faGet">发送</button>

<scripe>
	export default{
		methods:{
			faGet(){
			uni.request({
				url:'http://........',
				method：'GET',
				success(res){
					console.log(res)
				}
			})
		}
	}
}
</script>

也可以在onLoad中发起请求。

post请求

onLoad：function(){
	var requesTask = uni.request(
		{
			url:'http://...',
			method:'POST',
			data:{name:'name',age:20},
			success:function(res){
				console.log(res);
			}
		}
	)
}

data数据说明

最终发送给服务器的数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String。转换规则如下：

• 对于 GET 方法，会将数据转换为 query string。例如 { name: ‘name’, age: 18 } 转换后的结果是 name=name&age=18。
• 对于 POST 方法且 header[‘content-type’] 为 application/json 的数据，会进行 JSON 序列化。
• 对于 POST 方法且 header[‘content-type’] 为 application/x-www-form-urlencoded 的数据，会将数据转换为 query string。

数据缓存

本地数据存储，把数据临时存到本地而不是存到数据库。可以理解为将一个数据保存在手机上。

uni.setStorage（object）

将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。

object参数

参数名	说明
key	本地缓存中的指定的 key
data	需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象
success	接口调用成功的回调函数
fail	接口调用失败的回调函数
complete	接口调用结束的回调函数（调用成功、失败都会执行）

存储数据：

<button type="primary" @click="setStor">存储数据</button>

<script>
	export default{
		methods:{
			setStor(){
				uni.setStorage({
					key:'id',
					data:100,
					success(){	
						console.log('存储成功')
					}
				})
			}
		}
	}
</script>

uni.getStorage（object）

从本地缓存中异步获取指定 key 对应的内容。
object参数

参数名	说明
key	本地缓存中的指定的 key
success	接口调用成功的回调函数
fail	接口调用失败的回调函数
complete	接口调用结束的回调函数（调用成功、失败都会执行）

success返回参数

参数	说明
data	key对应的内容

获取数据：

<button type="primary" @click="getStorage">获取数据</button>

<script>
	export default{
		methods:{
			getStorage(){
				uni.getStorage({
					key:'id',
					success(res){	
						console.log('获取成功',res)
					}
				})
			}
		}
	}
</script>

uni.setStorageSync（key,data）

将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。

参数	说明
key	本地缓存中的指定的key
data	需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象

<button trpe="primary" @click="setSto">存储数据</button>

<script>
	export default{
		methods:{
			setSto (){
				uni.setStorageSync('id',1000)
			}
		}
	}
</script>

uni.getStorageSync（key）

从本地缓存中同步获取指定 key 对应的内容。
参数说明

参数	说明
key	本地缓存中的指定的key

<button trpe="primary" @click="getSto">存储数据</button>

<script>
	export default{
		methods:{
			setSto (){
				const res = uni.getStorageSync('id')
				console.log(res)
			}
		}
	}
</script>