axios.all 的动态使用

Posted 2023-02-22

【中文标题】axios.all 的动态使用

【英文标题】：Dynamic usage of axios.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 部分（可能使用数组键，...）。

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

【参考方案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;
                
            );
        );