如何从调用函数之外的axios响应中获取数据

Question

I'm trying to get a video title from a axios GET to a video API:

// METHOD GETTING A VIDEO ID:

latestVideo(videoID) {

  var self = this;
  var title;

  axios.get('http://video-api.dev/'+videoID)
  .then(response => {
    this.title = response.data.title
    console.log(response.data.title) //returns the correct title
  })
  return title // returns nothing

}

Console log shows the title, but I need to pass this to outside the call function, to have it available in my Vue app.

I've tried declaring var self=this but it does not seem to have any effect. Have I missed something?

Answer 1

Well, returns nothing because you are not assigning any value to the variable, you will have to assign the response data to a variable when the request fulfill:

latestVideo(videoID) {

  // var self = this;
  // var title;

  axios.get('http://video-api.dev/'+videoID)
  .then(response => {
    this.title = response.data.title
    console.log(response.data.title) //returns the correct title
  })
  // return title // not needed

}

Then, when the promise (the request) is resolved you can access to the variable from the component ( this.title )

You don't have to use the self switch if you are using arrow syntax.

Answer 2

You're returning title, when assigning the response to this.title , try returning this.title . I am making an assumption that latestVideo lives inside a class

class x {

latestVideo(videoID) {
    axios.get('http://video-api.dev/'+videoID)
    .then(response => {
        this.title = response.data.title
        console.log(response.data.title) //returns the correct title
    });

    return this.title
}}