Vue.js Global Axios Calls

Question

I am writing a project which uses so many Axios calls from different pages. Instead of using Axios calls multiple times, is it possible to write a single Axios call function and use it in each pages.

For ex, define an "axiosCall" function once and than use it in different pages by just calling that function.

axiosCall (serviceName, parameter) {
  axios
    .get(`http://localhost/xApi/` + serviceName + `/` + parameter)
    .then(response => {
        return response.data
    })
    .catch(e => {
      this.exceptionHandler('Error at get ' + serviceName + ' : ', e)
    })
}

Then use it like

var userData = axiosCall('user',1)
var roleData = axiosCall('role',2)

Thanks in advance

Definitely possible. What have you tried and what isn't working as expected? — thanksd, Feb 08 '18 at 14:32
Indeed it is possible. Yet as far as I know, the best practice for this should be that you create service classes for each service, and include the axios calls (CRUD) for each service inside them. Then it would be like var userData = userService.getUserById(5); etc. — Red fx, Feb 08 '18 at 14:35
I read about mixin, extending and inheritance in javascript. But actually I am new at JavaScript and so I could not analyse which is the best practice. So I am looking for a way to figure it out. — dyte, Feb 08 '18 at 14:38

score 2 · Accepted Answer · edited Jul 15 '22 at 23:20

2

There are a few ways to do this:

In your bootstrap file i.e main.js you could do Vue.prototype.$axiosCall = function () { ... } before you initialise Vue then within your components you could just call this.$axiosCall('user', 1).

Another way would be to use a mixin (axiosMixin.js):

export default {
  methods: {
    axiosCall () { ... }
  }
}

Then include it as a global mixin in your bootstrap file like: Vue.mixin(UserMixin) (again, in your bootstrap file before the initialise has been done).

edited Jul 15 '22 at 23:20

tony19

125,647
18
229
307

answered Feb 08 '18 at 14:34

webnoob

15,747
13
83
165

Using mixin solved my problem in an efficient way. Thank you webnoob. – dyte Feb 09 '18 at 07:27
Glad it helped and not a problem. – webnoob Feb 09 '18 at 16:44

Nikola Gavric · Answer 2 · 2018-02-08T14:34:53.627

-3

Maybe not the best solution, but it can work

axios-conf.js

window.axios = require('axios');

window.axios.defaults.headers.common = {
    'CUSTOM_HEADER': 'SOME TEXT',
    'X-Requested-With': 'XMLHttpRequest'
};

window.axios.axiosCall = function(serviceName, parameter) {
  axios.get(`http://localhost/xApi/` + serviceName + `/` + parameter)
    .then(response => {
        return response.data
    })
    .catch(e => {
      this.exceptionHandler('Error at get ' + serviceName + ' : ', e)
    })
}

edited Feb 08 '18 at 14:34

answered Feb 08 '18 at 14:32

Nikola Gavric

3,507
1
8
16

You're right, it's not the best solution and should be avoided. – webnoob Feb 08 '18 at 14:34

Vue.js Global Axios Calls

2 Answers2