2

Estou exportando uma função para outro arquivo que está como um componente Webpack-simple + VueJS. Essa é a função do arquivo api-user.js:

export function getUsers () {
    axios.post('/api/get_list',{})
    .then(req => {return req.data.list;})
    .catch(err => console.log(err))
}

No arquivo myComponent.vue, estou importando ela e chamando assim:

created: async function () {
      this.arrayUsers = await getUsers()
      console.log(this.arrayUsers)

},

porém apenas recebo undefined, e não estou entendendo muito bem o porque.

Um exemplo do que estou tentando fazer:

https://codesandbox.io/s/n046mxwpm


EDIT:

Consegui de uma maneira aqui, mas não é o que desejo ainda, pois requer muito código no arquivo qual estou tentando manter mais limpo.

api-user.js:

export function getUsers () { 
    return axios.post('/apiminer/get_list',{}) 
} 

mycomponent.vue:

created: function() { 

    getUsers().then((res) => { 
         this.arrayUsers= res.data.list 
    }) 
},

2 Respostas 2

0

Não sei te dizer exatamente o erro que pode estar acontecendo, mas tentarei ajudar com base no que você informou.

O primeiro erro que vejo, é que você possui um método getUsers(), porém dentro do método você está realizando um post, no caso axios.post. Neste caso era para ocorrer mais erros, como, por exemplo, 405 - Method not Allowed, com exceção de retornar undefined.

Outro problema que pode acontecer, é que no Vuejs, eu particularmente importo funções assim de outros arquivos para utilizá-las como filters, diretamente em sua tag <template>, e não para chamar funções dentro do created().

Posso sugerir para você tentar trocar esta função para ser utilizada como um mixin, e assim pode ser que ajude a resolver o problema. Veja abaixo:

api-users.js

export default {
  methods: {
    getUsers () {
      axios.post('/api/get_list',{})
        .then(req => {return req.data.list;})
        .catch(err => console.log(err))
    }
  }
}

myComponent.vue

Em seu <template>, insira:

<tr v-for="(item, index) in arrayUsers" v-if="arrayUsers && arrayUsers.length">

Abaixo é o código dentro do <script>:

import apiUser from "./api-user.js";

export default {
  name: "HelloWorld",
  mixins: [apiUser],
  data() {
    return {
      arrayUsers: []
    };
  },
  created() {
    this.arrayUsers = this.getUsers();
  },      
};

Observações:

  1. Corrija o diretório da importação do mixin apiUsers;
  2. Verifique se sua configuração em seu main.js ou outro arquivo de configuração, como a porta, etc, está correto;
  3. Verifique se nome do método no back-end está correto, bem como seu tipo e o retorno da api, se de fato está sendo retornado em um array de objetos list, dentro do data. Realize algum tipo de teste automatizado ou teste-o pelo Postman.

Espero ter ajudado.

7
  • A api está ok, já testei. Não entendi porque era para ocorrer "405 - Method not Allowed", pois se faço o mesmo no arquivo do componente tudo funciona, o problema está ao tentar organizar o código em dois arquivos separados. Já tentei com mixins e não funcionou. O problema que eu vejo(não tenho certeza) é que estou retornando de um método que tem uma promisse, e como é assincrono, não tem muita certeza quando irá atribuir o valor a variável arrayUsers, o que pode acontecer de receber undefined, porém o vuejs é reativo, então creio que não seja isso, já não tenho mais ideia do que tentar.
    – PerduGames
    Commented 18/03/2018 às 17:58
  • Apenas para comentar, por algum motivo minha internet não quer abrir o link enviado no codesandbox. Se estiver passando informações que não ajudam, me informe que deleto a resposta. Commented 18/03/2018 às 17:58
  • abri aqui em outro computador e foi, testa ai novamente o link.
    – PerduGames
    Commented 18/03/2018 às 18:03
  • @PerduGames Tentou exatamente com o código que passei e não funcionou? Estranho mesmo. Sobre o 405, geralmente em API's rest, no back-end para trazer dados, no caso usuários, é definido que será realizado um GET. Logo, em seu front-end deve ser feito um GET, caso contrário usualmente voltará o 405. No caso de ser asíncrono ou não, no momento que ele receber o retorno ele irá atribuir o retorno a sua variável data. Commented 18/03/2018 às 18:04
  • Não é isso, com a API está tudo ok, no exemplo do codesandbox utilizo chamando por get, mas essa interna aqui é post mesmo, mas está ok, tudo testado já. O problema está em algum conceito ai do javascript ou vuejs que ainda não entendo. E tentei sim, na verdade foi a primeira tentativa que fiz foi com mixins.
    – PerduGames
    Commented 18/03/2018 às 18:08
0

O método da API retorna uma promise e você tá retornando essa promise pra dentro da função getUsers().

A função getUsers() também deve retornar uma promise ficando assim:

getUsers(){
  return new Promise((resolve, reject) => {
    api.post(url).then(({ data }) => resolve(data))
  });
}

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 .