Динамическое использование axios.all - PullRequest
Новая
       20

Динамическое использование axios.all

1 голос
/ 12 июня 2019

Я хотел бы повторно использовать тот же компонент 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 Ответ

2 голосов
/ 12 июня 2019

Вы можете просто построить массив обещаний перед использованием axios.all. Поскольку вы используете синтаксис 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;
                }
            });
        });
}
...