0

I have some HTML tag with prop options that gets an array. The prop looks like :options="getOptions(param)". The functions looks like:

getOptions: function(param) {
    var queryArray = [];
    var url;

    // Logic to build queryArray

    url = '/' + this.collection_name + '/params/' + param + '?' + queryArray.join('&');
    let promiseResponse = this.getRequest(url);
    console.log(promiseResponse);
    return promiseResponse;
},

getRequest: (url) => {
    return axios.get(url).then(response => {
        return response.data
    });
}

The URL that is being generated in getOptions and being passed to getRequest contains an array of options like so: [option1,option2]. I can see a Promise object is being printed to the console but I need it to return the actual data. This is why I used response.data. I also tried to use async and await in some variants like as it said in this post How do I return the response from an asynchronous call?:

getRequest: async (url) => {
    return axios.get(url).then(response => {
        return response.data
    });
},

It didn't work and I'm not sure that I fully committed to use async or await because in the docs it said that:

async/await is part of ECMAScript 2017 and is not supported in Internet Explorer and older browsers, so use with caution.

How can I make getOptions return an array of the options?

vesii
  • 2,760
  • 4
  • 25
  • 71
  • `getRequest` returns a Promise, so `let promiseResponse = this.getRequest(url); console.log(promiseResponse);` won't give you the response data, only the Promise - you have to consume the Promise – CertainPerformance Mar 29 '20 at 07:53
  • @CertainPerformance Why my post is being closed if it's said in the post itself that the other post didn't help. Also, I understand why `console.log` does not work. My question is how to return it to an HTML tag. You can't find this part in the post that you suggested. – vesii Mar 29 '20 at 07:54
  • The linked question describes how to consume promises with `.then` - that's what you need to do, but you aren't doing it here, you're just logging the Promise. You need to consume it in order to get its resolve data – CertainPerformance Mar 29 '20 at 07:56
  • The render function is synchronous, so what you are trying [cannot work](https://forum.vuejs.org/t/render-async-method-result-in-template/36505/2). Load the data in `created` and set it to a reactive variable. Only a slight change, but the reactivity causes a second render when the data is ready. Small difference, but necessary. It's good generally to avoid template methods when possible also. Template methods are called every time the component is re-rendered for any reason, even for something like a label change. – Dan Mar 29 '20 at 09:46

0 Answers0