3

Como poderia executar a função sortOrder assim que a função getOrders terminar todas as requisições?

A ideia é ordenar todos os pedidos por data de compra mais recente.

Código

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
    }
}

1 Resposta 1

4

A solução "à moda do Vue" ou seja usando a reactividade que o Vue oferece é fazer o sortOrder uma computed property que depende de this.orderInfo. Isso faz com que o código de sortOrder seja corrido sempre que this.orderInfo mudar. Atenção que o .sort() muda a array original, isso pode dar efeitos indesejados em particular num ambiente reativo como no Vue...

Na verdade, pensando dessa maneira, eu daria novos nomes e fazia a coisa assim:

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
    }
  }
};
7
  • 1
    Deveria chamar a função getOrders no mounted?
    – Marconi
    Commented 29/11/2018 às 14:26
  • 1
    @Marconi desculpa estava no comboio e fiquei sem rede. Sim o this.getOrders() tem de ser chamado, mas dentro do watch. Assim ele é chamado sempre que o orders mudar. Talvez seja necessário um debouncer, mas assim acho que serve o teu caso.
    – Sergio
    Commented 29/11/2018 às 14:30
  • 1
    Nessa linha Promise.all(orders)... orders é undefined, algo que eu deva adicionar no código @Sergio?
    – Marconi
    Commented 29/11/2018 às 16:03
  • 2
    Agora sim hehehe, muito obrigado @Sergio, grande aprendizado aqui :)
    – Marconi
    Commented 29/11/2018 às 18:50
  • 2
    @Marconi exato! O Promise.all transforma uma array assíncrona numa array síncrona. O que te é dado em .then(orderInfo é a array na mesma ordem das promises que estão dentro de orders. Quando o Promise.all tiver corrido todas essas promises dá o resultado das mesmas no then. Devias também ter um .catch() para apanhar os erros, mas isso creio que sabes.
    – Sergio
    Commented 29/11/2018 às 19:02

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .