Vue页面多个axios请求得到数据后在渲染页面

问题描述：

当我们访问页面时，axios请求还没获得数据,，就渲染了页面，导致页面为空，这种情况很不稳定，取决于你后端接口速度。

原因：

因为axios请求是异步请求，假如当你的页面在最开始渲染的时候同时发送多个axios请求，如果后端接口返回数据的时间为1秒，那么在axios请求发出后，系统会去执行vue中的其他代码，当等你axios请求接收到数据后再去获取数据，此时已经过去1秒了，你的页面可能已经渲染完了，所以就可能会出现有时候页面有数据，有时候没数据，或者每次切换页面都是上一次访问的数据。

解决：使用 Promise.all

//created()在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图.
created() {
	Promise.all([
		new Promise((resolve) =>{
		''
		假设这一块是axios请求
		我们使用 setTimeout 代替axios请求
		''
		setTimeout(()=>{resolve('这个数据获取需要1秒')},1000)
		}),
		new Promise((resolve) =>{
		setTimeout(()=>{resolve('这个数据获取需要5秒')},5000)
		})
	]).then(res => {
		console.log(res)
		// 返回 = ['这个数据获取需要1秒', '这个数据获取需要5秒']
		//此时在去执行渲染页面，就可以保证数据的获取
		console.log("下面开始渲染表格等内容....")
		
	})
}

Promise.all会等待列表中所有请求或则函数中的resolve返回数据后在去执行

• 下面放一段代码，一个页面中获取8个请求后在渲染页面

		Promise.all([
				new Promise((resolve) =>{
					axios({
						method:'get',
						url: "xxxxxxxxxxxxx",
						params: {
							userid: this.userid
						}
					}).then(res=> {
						this.data1= res.data
						resolve("data1")
					})
				}),
				new Promise((resolve) =>{
					axios({
						method:'get',
						url: "xxxxxxxxxxxxx",
						params: {
							userid: this.userid
						}
					}).then(res=> {
						this.data2= res.data
						resolve("data2")
					})
				}),
				new Promise((resolve) =>{
					axios({
						method:'get',
						url: "xxxxxxxxxxxxx",
						params: {
							userid: this.userid
						}
					}).then(res=> {
						this.data3= res.data
						resolve("data4")
					})
				}),
				new Promise((resolve) =>{
					axios({
						method:'get',
						url: "xxxxxxxxxxxxx",
						params: {
							userid: this.userid
						}
					}).then(res=> {
						this.data4= res.data
						resolve("data4")
					})
				}),
				new Promise((resolve) =>{
					axios({
						method:'get',
						url: "xxxxxxxxxxxxx",
						params: {
							userid: this.userid
						}
					}).then(res=> {
						this.data5= res.data
						resolve("data5")
					})
				}),
				new Promise((resolve) =>{
					axios({
						method:'get',
						url: "xxxxxxxxxxxxx",
						params: {
							userid: this.userid
						}
					}).then(res=> {
						this.data6= res.data
						resolve("data6")
					})
				}),
				new Promise((resolve) =>{
					axios({
						method:'get',
						url: "xxxxxxxxxxxxx",
						params: {
							userid: this.userid
						}
					}).then(res=> {
						this.data7= res.data
						resolve("data7")
					})
				}),
				new Promise((resolve) =>{
					axios({
						method:'get',
						url: "xxxxxxxxxxxxx",
						params: {
							userid: this.userid
						}
					}).then(res=> {
						this.data8= res.data
						resolve("data8")
					})
				})
			]).then(res => {
				console.log(res)
				//["data1","data2","data3","data4","data5","data6","data7","data8"]
				
				/*
				
				渲染页面的代码
				
				*/
			})