[Vuejs]-Weird order output. Vue.js

by

2👍

✅

Since GetData makes an async request, you need to await it before proceeding so as to get a more predictable 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;
  }
👤painotpi

1👍

axios.get(...) is an asynchronous function and returns a Promise. When the request is finished this promise will resolve and the .then(...) part is executed to process the result.

While the request is in progress (and thus we are waiting for a server response) the execution of the code continuous. It would be not really efficient if we are waiting for the (potentially slow) server response.

👤n9iels

Leave a comment