动态使用axios.all

Question

我想重复使用相同的Vue组件来编辑和创建新用户。

在使用vue-router我添加了beforeRouteEnter ，它通过API获取数据。 根据是否在URL中设置了ID ，我是否要获取现有用户（ edit ）。

这是我的方法：

beforeRouteEnter (to, _from, next) {
        if (to.params.id) {
            axios
            .all ([
                axios.get ('/api/user/' + to.params.id),
                axios.get ('/api/states/users')
            ]).then (axios.spread ((userRes, statesRes) => {
                    next ((vm) => {
                        vm.user = userRes.data.data;
                        vm.states = statesRes.data.data;
                        vm.create = false;
                    });
                })
            );
        }
        else {
            axios
            .all ([
                axios.get ('/api/states/users')
            ]).then (axios.spread ((statesRes) => {
                    next ((vm) => {
                        vm.states = statesRes.data.data;
                    });
                })
            );
        }
    },

但是，您可以看到：这不是一个很好的处理方法。 我在考虑将URL添加到数组中，如果to.params.id不为空，则将'/api/user/' + to.params.id)推入该数组。

但是我不确定这是否是执行此操作的最佳方法，因为我需要以某种方式处理axios.spread部分（也许使用数组键，...）。

所以我的问题是：如何优化代码的性能和可读性更好的代码？

Answer 1

您可以在使用axios.all之前简单地构建promise数组。 由于使用的是ES6语法，因此您也可以省略axios.spread的使用，而有利于数组的解构。

如下所示：

beforeRouteEnter(to, _from, next) {
    const promises = [
        axios.get('/api/states/users')
    ];

    if (to.params.id) {
        promises.push(axios.get(`/api/user/${to.params.id}`));
    }

    axios.all(promises)
        .then(([statesRes, userRes]) => {
            next((vm) => {
                vm.states = statesRes.data.data;
                if (userRes) {
                    vm.user = userRes.data.data;
                    vm.create = false;
                }
            });
        });
}