javascript - Using axios in Vue.js with separate service? - Stack Overflow

admin管理员组

文章数量:1327945

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

Share Improve this question Follow asked Jan 27, 2018 at 13:54 Nick SynevNick Synev 38744 silver badges1111 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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 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)

本文标签： javascriptUsing axios in Vuejs with separate serviceStack Overflow