uni-app 在使用 onLoad() 直接发送请求时，会发生产生渲染异步的问题，即页面已经渲染好了，但是请求过来的数据还没完成赋值。问题代码如下：

会产生异步问题的 index.vue 代码：

<template>
	<view class="content">
		<view v-for="(item, index) in userList">
			<text>{{item.name}} - {{item.age}} </text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userList: []
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList() {
				uni.request({
					url: "https://www.fastmock.site/mock/e34be376320e67bcbff402db4095587c/api/apiDemo",
					method: "POST",
					data: {
						"username": "admin",
						"password": "123456"
					},
					success: (res) => {
						this.userList = res.data.data.userInfo.list
						console.log(this.userList)
					},
					fail: (err) => {
						console.log(err)
					}
				})
			}
		}
	}
</script>

<style>
</style>

上述代码可以完成请求，也可以获得数据，console.log(this.userList) 也可以打印出来内容，但是页面渲染是空白。因为 uni-app 在制作网页时不具有类似微信小程序那样的“即时渲染”，这里在渲染时是使用初始化的 userList 空列表，而之后才进行的赋值，因此产生了异步问题。

使用 Promise 进行异步转同步

简单来说，Promise 可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果。即先运行 Promise 中的代码，再运行 .then 之后的代码。

修改后的 index.vue 代码：

<template>
	<view class="content">
		<view v-for="(item, index) in userList">
			<text>{{item.name}} - {{item.age}} </text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userList: []
			}
		},
		onLoad() {
			this.getList().then(res => {
				this.userList = res
			})
		},
		methods: {
			getList() {
				return new Promise((resolve, reject) => {
					uni.request({
						url: "https://www.fastmock.site/mock/e34be376320e67bcbff402db4095587c/api/apiDemo",
						method: "POST",
						data: {
							"username": "admin",
							"password": "123456"
						},
						success: (res) => {
							resolve(res.data.data.userInfo.list)
						},
						fail: (err) => {
							reject(err)
						}
					})

				})
			}
		}
	}
</script>

<style>
</style>