学习Uni-app开发小程序Day15

今天学习了uni-app中的网络请求

网络请求

uni.request(OBJECT)

这里是发起网络请求

这是常用的一种方式

这里有个疑问:为什么success后面使用的是res？

原来这个res只是一个名称,这里可以使用其他的,不是一定要用res

html 复制代码

function request() {
	uni.request({
		url: "https://jsonplaceholder.typicode.com/posts",
		success: res => {
			console.log(res);
			arrs.value = res.data
		}
	})
}

这是第二种写法

html 复制代码

// 第二种方式,不使用success了,使用的是then,这里也不懂为什么要这么使用
// 这里查询了网络,原因是这里使用的访问网络接口是使用的Promises的方式,而
// then是Promises下的一个方法,允许指定回调函数，在异步任务完成后调用。
	function request() {
		uni.request({
			url: "https://jsonplaceholder.typicode.com/posts"
		}).then(res => {
			arrs.value = res.data
		});
	}

还有第三种用法

html 复制代码

// 第三种是使用异步的,但是有个关键的是 async和await,还是老问题,为什么要这么用？
// 函数前的关键字 async 使函数返回 promise,函数前的关键字 await 使函数等待 promise
	async function request() {
	 	let res= await	uni.request({
				url: "https://jsonplaceholder.typicode.com/posts"
			})
			arrs.value = res.data
	 	}

这里提出了几个疑问，自己并不清楚，在学习视频中，有给这种学习资料的，这里不做过多的描述

在哔哩哔哩中搜索：ES6 Promise的用法，ES7 async/await异步处理同步化，异步处理进化史，这里有使用的详解。

上面的接口是在学习文档中有提供，大家可以看看。
学习uni-app源码和学习文档

这里提一下，接口测试工具，使用的是ApiPost，也可以使用PostMan。

参数的使用，下面按照上面的三种情况，各个都做个实验，代码中有详细描述

html 复制代码

<template>
	<view class="">

	</view>
</template>

<script setup>
	uni.showLoading()

	// function request() {
	// 	uni.request({
	// 		url: "https://jsonplaceholder.typicode.com/posts",
	// 		data:{
	// 			id:'100'
	// 		},
	// 		method:'GET',
	// 		timeout:1000,
	// 		header:{
	// 			'to-header':'holle',
	// 			'content-type':'text/plain'
	// 		},

	// 	}).then(res => {
	// 		// console.log(res);
	// 		// arrs.value = res.data
	// 		// 这里设置了取消loading后,是没有效果的,
	// 		uni.hideLoading();
	// 		console.log(res.errMsg);
	// 	});
	// }

	function request1() {
		uni.request({
			url: "https://jsonplaceholder.typicode.com/posts",
			data: {
				id: '100'
			},
			method: 'GET',
			timeout: 1000,
			header: {
				'to-header': 'holle',
				'content-type': 'text/plain'
			},
			success: res => {
				console.log(res);
			},
			fail: err => {
				console.log(err);
			},
			// 使用这种方式也可以实现,感觉这种写法是错误的,但能实现效果
			complete() {
				uni.hideLoading()
				console.log(12);
			}
			// 下面是官方的写法,建议按照这种写法
			// complete: () => {
			// 	uni.hideLoading();
			// }
		})
	}

	async function request() {
		let res = await uni.request({
			url: "https://jsonplaceholder.typicode.com/posts",
			data: {
				id: '100'
			},
			method: 'GET',
			timeout: 1000,
			header: {
				'to-header': 'holle',
				'content-type': 'text/plain'
			},
			complete() {
				uni.hideLoading()
			},
			fail: (err) => {
				console.log(err);
			}
		})
		// arrs.value = res.data
	}

	request();
</script>

<style lang="scss" scoped>

</style>

上面的是根据三种情况，写的接口调用成功、失败、不论成功是失败都进入的方法。这里是做个测试，把timeout 的时间修改成1000ms，默认是60000ms。content-type 也是测试的，默认是application/json，data 是在传递参数的时候写的，使用的是数组的方式。

这就是网路请求过程中常用的参数，其他的可以看下文档，在以后使用的时候，查看文档使用。

初步的基础今天就学习完了，下来开始要做案例了，在案例中有新的问题或者新的知识点，我都会记录的，也算检验下近期学习的成果。
不忘初心、方得始终！