CODEWITHSUNDEEP
javascriptvue.jsaxios
Nick Synev
Nick Synev

Reputation: 387

Using axios in Vue.js with separate service?

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();

Upvotes: 7

Views: 5520

Answers (1)

Pubudu Dodangoda
Pubudu Dodangoda

Reputation: 2874

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)

Upvotes: 7

Related Questions