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

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

• javascript
• vue.js
• axios

1 Answer 1

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 bine 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/en/actions.html)