Как соблюдать принцип DRY при использовании VUE+AXIOS для асинхронных запросов?

Question

[Maxxdev]

Есть бэкенд API на PHP к которому обращается VueJS.
Т.к. методы обращения к API очень похожи, хотелось бы вынести их в отдельную функцию и передавать результат запроса к API.
То, как реализовано сейчас:

fetchStats: function (uid)
        {
            var vm = this;
            var url = vm.buildApiUrl('/api/stats?uid=' + uid);
            this.$http.get(url).then(function (response) {
                    vm.stats = response.data.stats;
            }).catch(function (error) {
                if (error.response.status == 403) {
                    vm.redirectLogin();
                }
            });
        },
          fetchComments: function (uid)
        {
            var vm = this;
            var url = vm.buildApiUrl('/api/comments?uid=' + uid);
            this.$http.get(url).then(function (response) {
                    vm.comments= response.data.comments;
            }).catch(function (error) {
                if (error.response.status == 403) {
                    vm.redirectLogin();
                }
            });
        },
         fetchMessages: function (uid)
        {
            var vm = this;
            var url = vm.buildApiUrl('/api/messages?uid=' + uid);
            this.$http.get(url).then(function (response) {
                    vm.messages= response.data.messages;
            }).catch(function (error) {
                if (error.response.status == 403) {
                    vm.redirectLogin();
                }
            });
        },

То, как хотелось бы:

fetchBuilder: function (url)
        {
            var vm = this;
            this.$http.get(url).then(function (responce) {
                  return  response;
            }).catch(function (error) {
                if (error.response.status == 403) {
                    vm.redirectLogin();
                }
            });
        };

var messages = vm.fetchBuilder('/api/messages?uid=' + uid );
var comments= vm.fetchBuilder('/api/comments?uid=' + uid );
var stats = vm.fetchBuilder('/api/stats ?uid=' + uid );

Comments

[dramiel007]

может быть так? в работоспособности на 100% не уверен

fetchBuilder: function (url, property)
        {
            var vm = this;
            this.$http.get(url).then(function (responce) {
                 return response.data[property];
            }).catch(function (error) {
                if (error.response.status == 403) {
                    vm.redirectLogin();
                }
            });
        };

var messages = vm.fetchBuilder('/api/messages?uid=' + uid, "messages" );
var comments= vm.fetchBuilder('/api/comments?uid=' + uid, "comments" );
var stats = vm.fetchBuilder('/api/stats ?uid=' + uid, "stats" );

Answer 1

[Evgeny Kulakov]

1. Перехват 403 ошибки можно сделать в интресепторе http клиента, в этом случае вы избавитесь от дублей обработки ошибки.
2. У вас практически все готово, просто сделайте функцию вида:

fetchBuilder(url) {
        return this.$http.get(url).then((responce) => {
            return  response;
        }).catch((error) => {
            if (error.response.status == 403) {
                this.redirectLogin();
            }
       });
};

Пользоваться как-то так:

this.fetchBuilder('/api/messages?uid=' + uid ).then(r => {
   this.messages = r
})

Ну и вам правильно посоветовали использовать vuex, так вы разделите ui и взаимодействие с бэком плюс получите профит в виде реактивного хранилища данных, которые можно будет забрать из любого компонента приложения.

Answer 2

[Ilya]

Почему бы не вынести запросы в экшены vuex?

Comments

[Maxxdev]

vuex не используется и, пока, не планируется к внедреню...

[Roman K]

Maxxdev, а зря

[Maxxdev]

Roman Kitaev, в чем проявляется "зря" конкретно к моему вопросу?
Методы вынесем в экшены и добавим мутации, но схожие куски кода останутся

actions: {
        fetchComments( { commit }) {
            axios.get(url).then(function (response) {
                 commit('SET_COMMENTS', response.data);
            }).catch(function (error) {
                if (error.response.status == 403) {
                    vm.redirectLogin();
                }
            }
        }
    },

поправьте меня плз если я ошибаюсь.

Answer 3

[markmariner]

Вы можете создать обычный js-файл, в котором определите класс для работы с запросами и экспортируете его.
А потом будете подключать этот класс в компонентах, в которых требуются обращения к серверу.