I made a fake api call to my json file with axios. I get a promise back from the function where i can get my data from. but i don't want that. I want to receive the data from the function.

my code now: products.js

export default {
    getAllProducts(axios) {
        return axios.get('fakedb.json').then(response => {
            return response.data;
        });
    }
}

the view file: a product.vue file

import productController from '~/data/controllers/product';
export default {
  data() {
    return {
      products: productController.getAllProducts(this.$axios).then(res => this.products = res)
    }
  },
}

but this is not what i want to achieve. what i want to achieve is this code in my product.vue file:

import productController from '~/data/controllers/product';
export default {
  data() {
    return {
      products: productController.getAllProducts(this.$axios)
    }
  },
}

i want to receive the data without having to handle the promise in the view file. any solution how to return my data in the products.js file?

if i do a normal return from the products.js file like this it works fine:

export default {
    getAllProducts(axios) {
        return [
          {
              "name": "Product1",
               "price": 9.75
          },
          {
              "name": "Product2",
              "price": 10.75
          }
        ]

    }
}

But i want it to go with axios

I made a fake api call to my json file with axios. I get a promise back from the function where i can get my data from. but i don't want that. I want to receive the data from the function.

my code now: products.js

export default {
    getAllProducts(axios) {
        return axios.get('fakedb.json').then(response => {
            return response.data;
        });
    }
}

the view file: a product.vue file

import productController from '~/data/controllers/product';
export default {
  data() {
    return {
      products: productController.getAllProducts(this.$axios).then(res => this.products = res)
    }
  },
}

but this is not what i want to achieve. what i want to achieve is this code in my product.vue file:

import productController from '~/data/controllers/product';
export default {
  data() {
    return {
      products: productController.getAllProducts(this.$axios)
    }
  },
}

i want to receive the data without having to handle the promise in the view file. any solution how to return my data in the products.js file?

if i do a normal return from the products.js file like this it works fine:

export default {
    getAllProducts(axios) {
        return [
          {
              "name": "Product1",
               "price": 9.75
          },
          {
              "name": "Product2",
              "price": 10.75
          }
        ]

    }
}

But i want it to go with axios

• javascript
• vue.js
• vuejs2

2 Answers 2

Since you have a .vue-file, I assume that this is a single-page vue ponent, right? And therefore you use vue-cli or webpack. I therefore assume that you can use async/await syntax.

Retrieving data from axios is asynchronous, because you basically cannot know how long it takes for it to retrieve the data over the network. And this kind of situation is what async/await is for.

So make the functions async:

products.js

export default {
    async getAllProducts(axios) {
        const response = await axios.get('fakedb.json');
        return response.data;
    }
}

product.vue:

import productController from '~/data/controllers/product';
export default {
  data() {
    return {
      products: [],
    };
  },
  async mounted: {
    this.products = await productController.getAllProducts(this.$axios);
  }
}

I do not think you can make the data function asynchronous, so return an empty data object (I have assumed that it is an array), and then use the mounted hook to retrieve data.

You can't. A function returns immediately and there is nothing meaningful for it to return if you don't want a promise, since loading won't have begun yet. This is the problem that promises solve to begin with. It's a bad pattern to make an async call into your data to begin with, though. Use this pattern instead:

data() {
  return {
    products: null
  }
},
methods: {
  getAllProducts() {
    return axios.get('fakedb.json').then(response => {
      this.products = response.data;
    });
  }
},
created() {
  this.getAllProducts();
}

The async call is abstracted out into the created hook, and when it's resolved it will set the data accordingly.

Here's a little demo