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