在Vue.js中使用axios并使用单独的服务？

Question

我想在我的Vue.js应用程序中移动axios请求逻辑来分离服务。 Axios总是返回promise，如何从组件中获取响应数据？ 或者可能还有其他一些解决方案吗？

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

Answer 1

您可以从请求模块返回承诺并在任何地方使用它。 例如，

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

因为我们不是要求.then在爱可信的结果，承诺将不会得到解决。 相反，promise本身将从此方法返回。 因此它可以如下使用，

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

但是，如果您使用的是vuex或redux等状态管理解决方案，则可以将异步操作与状态管理器结合使用，以便更好地控制。 如果您使用的是redux，则可以使用redux thunk或redux-saga帮助程序库。 如果您使用的是vuex，则可以在操作中处理此类副作用（请参阅此处https://vuex.vuejs.org/en/actions.html ）