在 Computed 中运行 Axios 的替代方案

Question

I am working on a high school project involving chemical data. I need to get a response from this URL and reference it in another function. When I try to use descriptionURL in my mounted function, I get an error saying it is undefined. Any help not involving 3rd party additions would be appreciated.

Note: the properties.CID is coming from a request from the mounted function.

 computed: { description() { var descriptionURL = "https://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/cid/" + this.properties.CID + "/description/json" //eslint-disable-next-line no-console console.log(descriptionURL); axios.get(this.descriptionURL) //eslint-disable-next-line no-console.then(response => {this.descriptionText = response.data}) //eslint-disable-next-line no-console.catch(function (error) { //eslint-disable-next-line no-console console.log(error); }) return descriptionURL } }, }

Answer 1

There are a few things that I find puzzling in your snippet.

To begin with, there is a variable called descriptionURL that is defined within the scope of the description() computed property. However, axios is sending a request to this.descriptionURL , which would be a variable defined at the component level, hence not the descriptionURL variable mentioned before. Is that intentional?

Also, your computed property returns descriptionURL , which might not be the content that you want to use.

Moreover, Computed properties should not have side effects , which yours seems to do (altering the property descriptionText ). I would recommend using a method instead of a computed property.

If you really intended your computed property to return descriptionURL , then you can access this value by calling this.description (as opposed to this.descriptionURL ) in mounted() .

Finally, since the API call needs some time to get a response, it is unlikely that wou will be able to use its result within mounted().

In case you are looking for alternatives, here is how I would implement this feature with my current understanding of the situation:

data(){
  return{
    descriptionText: null,
  }
},
method: {
  get_description() {
    var descriptionURL = "https://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/cid/" + this.properties.CID + "/description/json"
    axios.get(descriptionURL)
    .then(response => { this.descriptionText = response.data })
    .catch((error) => { console.error(error) })
  },
  other_method_using_description(){

    // Check if descriptionText actually contains a description
    if(!this.descriptionText) {
      console.error('descriptionText is still null')
      return
    }

    // use this.descriptionText
  }
}

In this example, get_description is a method used to populate the descriptionText property with the response from the HTTP request.

You can then use this property in other functions, assuming it has received data.

Answer 2

Please try .get(descriptionURL) instead of .get(this.descriptionURL) , because descriptionURL is in description() scope and not on vue instance.