现象描述
当页面加载的时候,一直显示“数据加载中”的loading。
解决方案之一
出现这样的原因,可能是该页面同时在加载两个或者两个以上的api数据请求,即多次调用后台接口。
解决思路: 同步执行,即是一个方法接一个方法的执行。
示例
(一)一直出现 数据加载loading 示例代码:
mounted() {
this.bug1();
this.bug2();
this.bug3();
},
//连接api函数
bug1() {
this.$http.post(this.HOST + '/cust/action1.do', {
'projid': this.$store.state.core.loginFormInfo.projId,
'custid': this.clientId
}, {
emulateJSON: true
}).then((response) => {
if(response.data.success) {}
if(!response.data.success) {}
})
},
bug2() {
this.$http.post(this.HOST + '/cust/action2.do', {
'projid': this.$store.state.core.loginFormInfo.projId,
'custid': this.clientId
}, {
emulateJSON: true
}).then((response) => {
if(response.data.success) {}
if(!response.data.success) {}
})
},
bug3() {
this.$http.post(this.HOST + '/cust/action3.do', {
'projid': this.$store.state.core.loginFormInfo.projId,
'custid': this.clientId
}, {
emulateJSON: true
}).then((response) => {
if(response.data.success) {}
if(!response.data.success) {}
})
},
(二)解决方案 示例代码:
mounted() {
// 1.先执行第一个
this.bug1();
},
bug1() {
this.$http.post(this.HOST + '/cust/action1.do', {
'projid': this.$store.state.core.loginFormInfo.projId,
'custid': this.clientId
}, {
emulateJSON: true,
async: false,
}).then((response) => {
// 2.执行第二个
this.bug2()
}
if(!response.data.success) {}
})
},
bug2() {
this.$http.post(this.HOST + '/cust/action2.do', {
'projid': this.$store.state.core.loginFormInfo.projId,
'custid': this.clientId
}, {
emulateJSON: true,
async: false,
}).then((response) => {
// 3.执行第三个
this.bug3()
}
if(!response.data.success) {}
})
},
bug3() {
this.$http.post(this.HOST + '/cust/action3.do', {
'projid': this.$store.state.core.loginFormInfo.projId,
'custid': this.clientId
}, {
emulateJSON: true,
async: false,
}).then((response) => {
if(response.data.success) {}
if(!response.data.success) {}
})
},
即是:三个在 mounted()
中的执行的请求后台api函数 依次 一个一个 执行。