Vue.js 全局 Axios 调用

Question

我正在编写一个项目，该项目使用来自不同页面的大量 Axios 调用。不是多次使用axios调用，是否可以写一个单独的axios调用函数，在每个页面中使用。

例如，定义一个 "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

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

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

Answer 2

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

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

另一种方法是使用 mixin (axiosMixin.js):

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

然后将其作为全局混合包含在您的 bootstrap 文件中，例如：Vue.mixin(UserMixin)（同样，在初始化完成之前在您的 bootstrap 文件中）。

Vue.js 全局 Axios 调用

Vue.js Global Axios Calls

javascript

vue.js

vuejs2

axios

minix