How to get data from axios reponse outside the call function

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?

`this.title` != `title` you initialized an empty `var title` and return it empty — Sovalina, Jun 05 '18 at 11:55
Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Belmin Bedak, Jun 05 '18 at 12:12

Ander · Answer 1 · 2018-06-05T12:17:04.110

0

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.

edited Jun 05 '18 at 12:17

answered Jun 05 '18 at 11:56

Ander

758
7
15

`response` is not defined when declaring the variable – Filip Blaauw Jun 05 '18 at 12:01
@FilipBlaauw in this case `title` would be always undefined since you are dealing with async data.You should return the `title` in the callback of `then`. – Belmin Bedak Jun 05 '18 at 12:04
True, I will change the answer – Ander Jun 05 '18 at 12:12

score 0 · Answer 2 · answered Jun 05 '18 at 13:42

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
}}

How to get data from axios reponse outside the call function

2 Answers2