uni-app学习05 封装网络请求和获取动态数据

封装网络请求

新建文件夹utils用于存放工具js文件

```css
/* 
	base.js
	
	公共接口配置
 */

const base ={
	host:'http://localhost:8088',// 基础域名
	indexData:'/store/getStoreList',//首页接口
}

export default base

获取动态数据

在utils文件夹中创建request.js用于网络请求

/* 
	request.js
	
	封装的网络请求的方法
	url 接口地址
	method 请求方式
	data 参数传递
	options 配置参数
		{
			loading:boolean,	//是否加载动画，默认为真，加载动画，可以在传参时传递false取消
			title:'名称'
		}
 */
export default function(url,method='Get',data={},options={loading:true}){//传参时按顺序传
	return new Promise((resovle,reject)=>{
		//交互动画
		if(options.loading){
			uni.showLoading({
				title:"数据加载中"
			})
		}
		uni.request({
			url:url,
			method,
			data,
			success:res=>{
				if(res.data.status===200){
					uni.showToast({
						title:"数据加载完毕"
					})
				}
				resovle(res.data)
			},
			fail:error=>{
				reject(error)
			},
			complete() {
				// 成功或失败都执行
				uni.hideLoading()
			}
		})
	})
}

在home.vue中修改script

<script>
	import base from '@/utils/base.js';
	import request from '@/utils/request.js';
	export default {
		data() {
			return {};
		},
		// 生命周期
		created() {
			this.getIndexData()
		},
		methods: {
			// 请求首页的动态数据信息
			// async 关键字写在函数名之前（相当于一个标识），
			// 让普通函数具有异步的行为特征，
			// 但是整体上代码却是同步执行的。
			async getIndexData(){
				// let用来声明变量。用法类似于var，但是所声明的变量，
				// 只在let命令所在的代码块内有效。
				let res = await request(base.host+base.indexData)
				console.log('首页动态数据---',res);
			}
		}
	};
</script>

加载动画

成功获取后台数据库中的动态数据，打印到小程序的控制台中