奇怪的訂單 output。 Vue.js

Question

methods: {
    ShowWindow: function(QueryID) {
        this.$data.ID = QueryID;
        if(this.GetData())
        {
            console.log("asdasd")
        }
        document.querySelector("#EditWindow").style.visibility = "visible";
        console.log(this.$data.RowData.name + "asdd");
        this.$refs.Title.SetName(this.$data.RowData.name + " " + this.$data.ID);
    },
    GetData: function(){
        const URI = localStorage.getItem("URI") + *URL part 2* + this.$data.ID;
        axios.get(URI, this.$parent.$data.optionsAxios).then((result) =>{
            this.$data.RowData = result.data;
            //console.log(result.data);
            console.log(this.$data.RowData.name);
        }).catch(err =>{
            console.log(err);
        })
        return true;
    }
},
mounted(){
    this.$data.ID = this.$route.params.UserID;
    this.ShowWindow(this.$data.ID);
    this.$data.TableName = this.$parent.TableName;
}

我不知道為什么我的 consol.log() 以該順序執行。

首先我從這個得到答案

console.log("asdasd");

然后

console.log(this.$data.RowData.name + "asdd");

最后

console.log(this.$data.RowData.name);

我不知道為什么它會忽略 this.GetData() 內部的內容並最后執行此操作。

Output

Answer 1

由於GetData發出async請求，因此您需要在繼續之前await它，以便獲得更可預測的 output。

methods: {
    ShowWindow: async function(QueryID) {
      this.$data.ID = QueryID;
      try {
        const result = await this.GetData()

        this.$data.RowData = result.data;
        console.log(this.$data.RowData.name);

        if (result) {
          console.log("asdasd")
        }

        document.querySelector("#EditWindow").style.visibility = "visible";
        console.log(this.$data.RowData.name + "asdd");
        this.$refs.Title.SetName(this.$data.RowData.name + " " + this.$data.ID);

      } catch(e) {
        console.log('error');
      }
    },
    GetData: function() {
      const URI = localStorage.getItem("URI") + * URL part 2 * +this.$data.ID;
      return axios.get(URI, this.$parent.$data.optionsAxios);
    }
  },
  mounted() {
    this.$data.ID = this.$route.params.UserID;
    this.ShowWindow(this.$data.ID);
    this.$data.TableName = this.$parent.TableName;
  }

Answer 2

axios.get(...)是異步 function 並返回Promise 。 請求完成后，此 promise 將解析並執行 .then .then(...)部分以處理結果。

當請求正在進行時（因此我們正在等待服務器響應），代碼的執行是連續的。 如果我們正在等待（可能很慢）服務器響應，那將不是很有效。