How to turn several asynchronous requests into synchronous?

Question

How could I perform the function sortOrder as soon as the function getOrders complete all requests?

The idea is to sort all orders by latest purchase date.

Code

mounted () {
    this.user = this.$q.localStorage.get.item('userInfo')
    axios.get(`${api.getOrders}${this.user.cpf}`).then(response => {
      this.orders = response.data
      if (this.orders !== '') {
        this.$q.loading.show()
        this.getOrders(callback => {
          this.sortOrder()
        })
      }
    })
  },
  methods: {
    getOrders: function () {
      for (let i = 0; i < this.orders.length; i++) {
        axios.get(api.obterOrderInfo(this.orders[i].orderId)).then(response => {
          this.orderInfo = this.orderInfo.concat(response.data)
        })
      }
    },
    sortOrder: function () {
      this.orderInfo.sort(this.compare)
      this.$q.loading.hide()
    },
    compare: function (x, y) {
      return x.creationDate < y.creationDate
    }
}

Answer 1

The "Vue-like" solution, that is, using the reactivity that Vue offers, is to sortOrder one computed Property that depends on this.orderInfo. This makes the code of sortOrder is run whenever this.orderInfo change. Note that the .sort() changes the original array, this can give unwanted effects in particular in a reactive environment as in Vue...

Actually, thinking that way, I’d give new names and do the thing like this:

module.exports = {
  data() {
    return {
      orders: [],
      orderInfo: [],
    }
  },
  mounted() {
    this.user = this.$q.localStorage.get.item('userInfo')
    axios.get(`${api.getOrders}${this.user.cpf}`).then(response => {
      this.orders = response.data;
    })
  },
  computed: {
    sortedOrder() {
      return this.orderInfo.slice().sort(this.compare);
    }
  },
  watch: {
    orders() {
      if (this.orders.length > 0) {
        this.$q.loading.show();
        this.getOrders();
      }
    },
    sortedOrder() {
      this.$q.loading.hide();
    }
  },
  methods: {
    getOrders: function() {
      const orders = this.orders.map(order => {
        const endpoint = api.obterOrderInfo(order.orderId);
        return axios.get(endpoint).then(response => response.data)
      });
      Promise.all(orders).then(orderInfo => this.orderInfo = orderInfo);
    },
    compare: function(x, y) {
      return x.creationDate < y.creationDate
    }
  }
};