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

Vue hykeda 95℃ 0评论

这段时间在使用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 必须成对出现 不然会报错。

转载请注明:雕木乱 » 关于uni-app 中 使用async + await 将异步请求同步化

喜欢 (0)

您必须 登录 才能发表评论!