Using axios in Vue.js with separate service?

Question

I wanted to move axios request logic to separate service in my Vue.js app. Axios always returns promise, how can I fetch response data from it in my component? Or may be there are some other solution for this?

UserService.js

class UserService {
    getUser() {
        const token = localStorage.getItem('token');
        return axios.get('/api/user', {
            headers: {
                'Authorization': 'Bearer ' + token
            }
        }).then(function (response) {
            return response.data;
        }).catch(function (error) {
            console.log(error);
        });
    }
    getUserTasks() {
        const token = localStorage.getItem('token');
        return axios.get('/api/user/task', {
            headers: {
                'Authorization': 'Bearer ' + token
            }
        }).then(response => {
            return response;
        }).catch(function (error) {
            console.log(error);
        });
    }
    get currentUser() {
        return this.getUser();
    }
}
export default new UserService();

Pubudu Dodangoda · Accepted Answer · 2018-01-27 14:11:48Z

7

You can return the promise from the request module and use it anywhere. For example,

sendGet(url) {
    const token = localStorage.getItem('token');
    return axios.get(url, {
        headers: {
            'Authorization': 'Bearer ' + token
        }
    })
}

Since we are not calling .then on the axios result, the promise will not be resolved. Instead, the promise itself will be returned from this method. Thus it can be used as follows,

getUser() {
  axiosWrapper.sendGet('/api/user')
    .then((response)=> {
        // handle response
    })
    .catch((err)=>{
        // handle error
    })
}

However, if you are using a state management solution like vuex or redux, you can combine async actions with the state manager for better control. If you are using redux, you can use redux thunk or redux-saga helper libraries. If you are using vuex, you can handle such side effects in the actions (see here https://vuex.vuejs.org/en/actions.html)

edited Jan 27, 2018 at 14:11

answered Jan 27, 2018 at 14:05

Pubudu Dodangoda

2,8942 gold badges26 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nick Synev Over a year ago

Ah, so I should use then in component to fetch those data. Thank you!

Collectives™ on Stack Overflow

Using axios in Vue.js with separate service?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related