vue 一直显示数据加载中的解决方案之一

现象描述

当页面加载的时候，一直显示“数据加载中”的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函数 依次 一个一个 执行。