VueRouter - 导航前获取 - 多个AJAX

时间:2017-05-15 21:14:38

标签: vuejs2 axios vue-router

我想使用beforeRouteEnter后卫,所以我可以确保在转到页面之前加载了我的数据。我在vue-router文档中阅读了您可以找到here的示例。

现状

我正在执行两次AJAX次调用,以便在created生命周期事件中获取一些数据。

export default {

    created() {
      const _this = this;
      axios.get('/getCompanyDetails').then((response) => {
            _this.private.company_details = response.data
        });
      axios.get('/getusers').then((response) => {
            if(response.data){
                _this.private.company_users =  response.data;
            }
        });
    }
}

我尝试了什么

 beforeRouteEnter (to, from, next) {

        function getCompanyDetails() {
            return  axios.get('/getCompanyDetails')    
        }

        function getUsers() {
            return axios.get('/getusers');
        }

        axios.all([getCompanyDetails(), getUsers()])
            .then(axios.spread(function (company_details, company_users) {
                next(vm => vm.setData(err, company_details, company_users))
            }));
    },

我是否在正确的轨道上?我在这里看到的唯一一件事是我失败了我只需要在setData中调用一个函数next,并且从不同的AJAX调用中接收所有参数。

有没有办法在setUsers()中调用setDetails()next等多个函数?

有没有比我做的更好的方式?

1 个答案:

答案 0 :(得分:2)

正如@thanksd所说:

next((vm) => { vm.setUser(err, company_users); vm.setDetails(err, company_details); })

最后的答案是

beforeRouteEnter (to, from, next) {

        function getCompanyDetails() {
            return  axios.get('/getCompanyDetails')    
        }

        function getUsers() {
            return axios.get('/getusers');
        }

        axios.all([getCompanyDetails(), getUsers()])
            .then(axios.spread(function (company_details, company_users) {
                next((vm) => { vm.setUser(err, company_users); vm.setDetails(err, company_details); })
            }));
    },