axios.all 的动态使用答案

【问题标题】：Dynamic usage of axios.allaxios.all 的动态使用
【发布时间】：2019-10-26 08:28:21
【问题描述】：

我想重新使用相同的 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 添加到数组并将 '/api/user/' + to.params.id) 推送到该数组，如果 to.params.id 不为空。

但我不确定这是否是最好的方法，因为我需要以某种方式处理 axios.spread 部分（可能使用数组键，...）。

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

【问题讨论】：

标签： javascript vue.js vuejs2 axios vue-router

【解决方案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;
                }
            });
        });
}

【讨论】：