摘要：
问题描述：当我们访问页面时，axios请求还没获得数据,，就渲染了页面，导致页面为空，这种情况很不稳定，取决于你后端接口速度。原因：因为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返回数据后在去执行
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"]
/*
渲染页面的代码
*/
})
