0

estou enfrentando problemas com o Vuex e Javascript, acredito porque não estou conseguindo trabalhar direito com Promises, Vuex e Async/Await

Tenho uma função que percorre todo uma array (map) Dentro de um if, verifico se não tenho essa ID no meu Vuex

O problema entra aí, eu faço a chamada da função this.getCentroDeCustos(itemArray.contaGerencial.id);, onde sua função é apenas fazer uma chamada e guardar dados no vuex, mas o restante do meu código não está aguardando a sua conclusão e acaba salvando dados da minha array vazios pois no Vuex na primeira vez que executo ainda consta como vazio.

Abaixo meu código:

getCentroDeCustosCache(arrayPraPercorrer){
    //Vou atrás dos centros de custos e jogo em cache
    let nomeCentroDeCusto = '';
    let idCentroDeCusto = '';

    arrayPraPercorrer.map((itemArray, index) => {
        if(this.cacheCG.idContasGerenciais.indexOf(itemArray.contaGerencial.id) == -1) {
            this.getCentroDeCustos(itemArray.contaGerencial.id);
        } 

        this.cacheCG.centroDeCustos.map(itemCG => {
            if(itemCG.centroDeCusto == itemArray.centroDeCusto.replace(/\s/g,'')){
                arrayPraPercorrer[index].nome = itemCG.nome 
                arrayPraPercorrer[index].idCentroDeCusto = itemCG.id
            }
        });

    });
    alert(JSON.stringify(arrayPraPercorrer) + 'CAIUUU ***************')
    return arrayPraPercorrer;

},

Esse código abaixo é a função que eu chamo que leva os novos dados a meu vuex.

async getCentroDeCustos(idDaContaGerencial){
    await axios({
            method: "get",
            url: `/centrosdecustos/contasgerenciais/${idDaContaGerencial}`,
            responseType: "json",
            headers: {
            Authorization: `Basic ${btoa(this.loggedUser.email + ":")}`,
            Accept: "application/json",
            "Content-Type": "application/json"
            }
        }).then(response => {
            this.$store.commit('setCC', {
                itemName: 'cacheCG',
                arrayName: 'centroDeCustos',
                content: response.data
            });
            this.$store.commit('setInArray', {
                itemName: 'cacheCG',
                arrayName: 'idContasGerenciais',
                content: idDaContaGerencial
            });
        })  
},
2
  • 1
    Estás a misturar alguns conceitos... podes esclarecer algumas dúvidas: que versão de Vuex estás a usar? como é o teu template?
    – Sergio
    Commented 10/06/2019 às 20:30
  • Vuex: 3.0.1 Mudei a estrutura do código, dei uma comentada lá onde tá rolando o problema: codepen.io/anon/pen/dBywNz Commented 11/06/2019 às 13:10

1 Resposta 1

1

Quando você usa async/await você não precisa usar a função then() para esperar a Promise, ela vai ser o retorno do await.

Uma função assíncrona pode conter uma expressão await, que pausa a execução da função assíncrona e espera pela resolução da Promise passada, e depois retoma a execução da função assíncrona e retorna o valor resolvido.

Fonte: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/funcoes_assincronas

Tente assim:

async getCentroDeCustos(idDaContaGerencial){
    try {
      res = await axios({
        //headers do axios bla bla bla
        }
      })
      this.$store.commit('setCC', {
          itemName: 'cacheCG',
          arrayName: 'centroDeCustos',
          content: res.data
      });
      this.$store.commit('setInArray', {
          itemName: 'cacheCG',
          arrayName: 'idContasGerenciais',
          content: idDaContaGerencial
      });
    }catch(e){
      alert(e);
    }
  },

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 .