How to follow the DRY principle when using VUE+AXIOS for asynchronous requests?

Question

Asynchronous programming

There is a backend API in PHP that VueJS accesses.
Because API access methods are very similar, I would like to put them in a separate function and pass the result of the request to the API.
The way it's implemented now:

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();
                }
            });
        },

The way you would like:

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 );

Answer 1

1. Interception of 403 errors can be done in the client's http intreseptor, in this case you will get rid of duplicate error handling.
2. You are almost ready, just make a function like this:

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

Use something like this:

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

Well, you were rightly advised to use vuex, so you will separate the ui and interaction with the back, plus you will get a profit in the form of a reactive data store that can be taken from any application component.

Answer 2

Why not move requests into vuex actions?

Answer 3

You can create a regular js file in which you define a class for working with requests and export it.
And then you will connect this class in components that require calls to the server.