Assign the return of a function that returns from a Promise

Question

I am exporting a function to another file that is as a Webpack-simple + Vuejs component. That’s the function of the file api-user.js:

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

In the archive myComponent.Vue, I’m importing her and calling her that:

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

},

but I only get paid undefined, and I’m not really understanding why.

An example of what I’m trying to do:

https://codesandbox.io/s/n046mxwpm

---

EDIT:

I got it in a way here, but it’s not what I want yet, because it requires a lot of code in the file which I’m trying to keep cleaner.

api-user.js:

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

mycomponent.Vue:

created: function() { 

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

Answer 1

The API method returns a Promise and you’re returning this Promise into the function getUsers().

The function getUsers() should also return a Promise being like this:

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

Answer 2

I can’t tell you exactly what mistake might be going on, but I’ll try to help based on what you reported.

The first mistake I see is that you have a method getUsers(), but within the method you are performing a post, in the case axios.post. In this case there were to be more errors, such as 405 - Method not Allowed, with the exception of returning undefined.

Another problem that may happen is that in Vuejs, I particularly import functions like this from other files to use them like Filters, directly on your tag <template>, and not to call functions within the created().

May I suggest you try to change this function to be used as a mixin, and so it may help you solve the problem. See below:

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

In his <template>, insert:

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

Below is the code within the <script>:

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

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

Remarks:

1. Fix the import directory for mixin apiUsers;
2. Check if your configuration in your main.js or other configuration file such as port, etc., is correct;
3. Check that the method name in the back end is correct, as well as its type and the return of the api, if it is actually being returned in an array of objects list, within the date. Perform some kind of automated testing or test it by Postman.

I hope I’ve helped.