Comment by Mirko Vukušić on "How can I use the data of axios's response outside?" | Hashnode

Mirko Vukušić

Full(stack|dev|life)

May 22, 2017

I'm not sure I understand what exactly you want. Axios.get() returns a promise, it is async ofcourse. That means your getSrc() is also async so it cannot just return a value when called. That value does not exist yet at the moment of calling it!

So, your code looks ok, your getSrc() will return a promise which you can manipulate later. Only the line ''// doing other something" seems wrong. That's going to execute in parallel with axios.get()! Depeding on what that other something is, you might want to put it in another .then().

Can you give us an example of what exactly you expect your getSrc() to return?

Chuoke ChungYoung

PHPer

May 22, 2017

Thanks!

There is a mistake. I should have asked straight.

In fact, I'm developing a personal website. It has some actions (at least 5) need captcha, that comes from only one action of controller. I don't want to write this code block each.

var _this = this;
axios.get('/captcha/src')
.then(function (response) {
    _this.captchaSrc = response.data;
})
.catch(function (error) {
    console.log(error);
});

So I plan to encapsulate it be a common function so that I can adjust it at any time. As you know I failed.

There are many actions like this need to encapsulate, that's why I asked this question.

Maybe if you do write that code block for each, make it work, post it here.... then we can optimize and find a better solution. It's very difficult to understand background of your problem without it.

But if you have several async operations (like axios.get) that you want to execute on a single action (click), maybe you should take a look at Promise.all() here: developer.mozilla.org/en/docs/Web/JavaScript/Refe…

... you can batch all 5 async operations into one promise that will return success only after and if all those operations succeed.

Cipto Hadi

Nov 14, 2017

it would be helpful if we console log our response data. I cannot fully understand your question, but maybe my experience is helpful.

I also have experienced a problem accessing response data.

my rest api returns response similar to :

{
    data: {
        [
            { id: 1, caption: '1 Awesome desc' src: ''},
            { id: 2, caption: '2 Awesome desc' src: ''}
        ]
    },
    info: {
        developer: 'Awesome developer'
    }
}

my js script (i used vuejs):

axios.get(`https://mydomain.dev/photos`)
    .then(response => {
      // JSON responses are automatically parsed.
      this.photos = response.data
    })
    .catch(e => {
      this.errors.push(e)
    })

if I just use response.data, i get all the response (the photos and info), not the photos that I actually need. So photos is nested inside response.data

this.photos = response.data.data // it works

Search Hashnode