vue.js全局轴呼叫

Question

我正在编写一个项目，该项目使用了来自不同页面的许多Axios调用。而不是多次使用Axios调用，而是可以编写单个Axios调用功能并在每个页面中使用它。

对于ex，仅通过调用该函数来定义一个" axioscall"函数。

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

然后像

一样使用它

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

预先感谢

Answer 1

有几种方法可以做到这一点：

在bootstrap文件中，即 main.js您可以在初始化vue之前进行 Vue.prototype.$axiosCall = function () { ... }，然后在组件内您可以调用this.$axiosCall('user', 1)。

另一种方法是使用mixin(axiosmixin.js(：

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

然后将其作为全局混音在您的引导文件中包括：Vue.mixin(UserMixin)(同样，在完成初始化之前，在Bootstrap文件中(。

Answer 2

也许不是最好的解决方案，但是它可以工作

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