关于uni-app 中 使用async + await 将异步请求同步化

hykeda6年前Vue1767

这段时间在使用uni-app开发小程序,希望在页面加载时,获取地区数据,然后展示到页面上。

一开始写在了onLoad方法上,发现页面加载时,用异步uni.request方法获取数据,当页面加载完后,异步方法还未获取到数据,赋值给变量的时候是空值。

代码片段:

onLoad() {
	uni.request({
		url: url,
		data: {},
		method:'GET',
		header: {
			'Access-Control-Allow-Origin':'*'
		},
		success: (result) => {
			try {
				uni.setStorageSync('storage_area', JSON.parse(result.data.items));
				this.arealist = JSON.parse(res.data.items);
			} catch (e) {
				// error
			}
	
		},
		fail: (e) => {
			res(e);
		}
	})
}

在这里 arealist 这个变量赋值过程延时,导致页面上展示的时候是空。

解决这个问题 使用 异步方法同步化 async和await关键字

onLoad(){
	this.setAreaList();
},
methods: {
	async setAreaList(){ //这里使用异步关键字
		let area = await this.areaCache(); //这里使用了await 会等待areaCache这个方法返回数据后才会去执行下面的代码
		
	        console.log(area);
	}
}

areaCache方法必须返回的是一个Promise对象

areaCache:function(){
	return new Promise((res) => {
		try {
			const value = uni.getStorageSync('storage_area');
			if (value) {
				res(value);
			}else{
				uni.request({
					url: url,
					data: {},
					method:'GET',
					header: {
						'Access-Control-Allow-Origin':'*'
					},
					success: (result) => {
						try {
							uni.setStorageSync('storage_area', JSON.parse(result.data.items));
							res(JSON.parse(result.data.items));
						} catch (e) {
							// error
						}
				
					},
					fail: (e) => {
						res(e);
					}
				})
			}
			
		} catch (e) {
			// error
		}
	})
}

注意点:这里的 async 和 await 必须成对出现 不然会报错。

相关文章

vue中的h函数使用

一、参数设置h函数接收三个参数。第一个参数:,可以为一个html标签,一个组件,一个异步组件,或者是一个函数式组件。第二个参数:{ Object } Props,与attributes和props,以...

页面直接使用ElementUI,官方提供的表格代码,样式错乱

页面直接使用ElementUI,官方提供的表格代码,样式错乱

在使用element编写前端代码是,引入element的css和js,使用官方提供的例子:<template>   <el-table :data=&...

useRoute,userRouter的用法

 import { useRoute, useRouter } from 'vue-router'; 这里的useRoute是获取传递的变量:const route...

vite+vue3项目中js方法调用

这这里一创建一个axios接口demo为例:首先安装axios,打开官方GitHub:https://github.com/axios/axios或者访问中文网站:https://www.axios-...

vue3中给响应式数据赋值操作,以及toRef 和 toRefs区别

最近在开发vue3时,定义了一个变量:let form = reactive({});form = res.items;这里我将接口获取到的数据直接赋给了form,这样我在表单中:<el-for...

在写css时不起作用,请排查是否是scoped的问题

在写css的时候,用了框架自带的组件table和card,把table包在了card里面,然后发现table的分页样式出现了问题,查看源码后发现card中写了ul li { margin-left:2...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。