Vue.js 全局 Axios 调用答案

【问题标题】：Vue.js Global Axios CallsVue.js 全局 Axios 调用
【发布时间】：2018-07-19 03:53:32
【问题描述】：

我正在编写一个项目，该项目使用来自不同页面的大量 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)

提前致谢

【问题讨论】：

绝对有可能。您尝试了哪些方法，哪些没有按预期工作？
确实有可能。然而据我所知，最佳实践应该是为每个服务创建服务类，并在其中包含每个服务的 axios 调用 (CRUD)。然后就像 var userData = userService.getUserById(5);等
我读到了 javascript 中的 mixin、扩展和继承。但实际上我是 JavaScript 的新手，所以我无法分析哪个是最佳实践。所以我正在寻找一种方法来解决它。
查看 Vuex。

标签： javascript vue.js vuejs2 axios minix

【解决方案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)
    })
}

【讨论】：

你是对的，这不是最好的解决方案，应该避免。

【解决方案2】：

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

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

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

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

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

【讨论】：

使用 mixin 有效地解决了我的问题。谢谢 webnoob。
很高兴它有帮助而且没有问题。