网页在 Axios GET 响应之前加载答案

【问题标题】：The web page is loading before Axios GET responce网页在 Axios GET 响应之前加载
【发布时间】：2020-12-19 09:26:34
【问题描述】：

我对 Vue.js 还是很陌生。

也许有人可以帮我解决下一个问题：

我的网页元素的值取自我应该在加载页面之前发送的 Axios GET 响应。但是我的页面在我得到服务器的响应之前就已经加载了。我得到一个值未定义的错误。

我的 main.vue 文件

  beforeMount()
   {
      this.firstTimeRun();
   },

我的 mixin.js 文件

   methods: {
    async firstTimeRun() {
        await this.getConfig();
        await this.getAlarmStatus();
    },
    async getConfig() {
        const configResponce = await axios.get('http://10.10.10.10/multi_get.json?c0=config')
            .then((res => { this.config = res; }))
            .catch(err => console.log(err));
        this.$store.commit("setConfigData", this.config);
    },
    async getAlarmStatus() {
        const alarmResponce = await axios.get('http://10.10.10.10/multi_get.json?c0=alarm_status')
            .then((res => {
                this.alarm_status = res;
            }))
            .catch(err => console.log(err));
        this.$store.commit("setAlarmData", this.alarm_status);
    },

   // In this method I fill the elements and I suppose to use data from getConfig() and 
   getAlarmStatus() methods.

   fillElements(){
    // Do something...
    }
  }

有人对此有答案吗？谢谢。

【问题讨论】：

标签： javascript vuejs2 promise axios

【解决方案1】：

当您调用 get 方法时，添加 e.preventDefault 方法。单击提交按钮时，它将停止页面加载。

async getConfig(e) {

e.preventDefault();
        const configResponce = await axios.get('http://10.10.10.10/multi_get.json?c0=config')
            .then((res => { this.config = res; }))
            .catch(err => console.log(err));
        this.$store.commit("setConfigData", this.config);
    },

【讨论】：