Странный вывод заказа. 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 (), и выполняет это последним.

Вывод

Answer 1

Поскольку GetData отправляет запрос async, вам нужно await перед продолжением, чтобы получить более предсказуемый результат.

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(...) является асинхронной функцией и возвращает Promise . Когда запрос будет завершен, это обещание разрешится, и часть .then(...) будет выполнена для обработки результата.

Пока запрос выполняется (и, таким образом, мы ждем ответа сервера), выполнение кода непрерывный. Было бы не очень эффективно, если бы мы ожидали (потенциально медленного) ответа сервера.