javascript - 在 Vue 中创建一个 axios 实例不起作用

Question

我在 Vue 中为 AJAX 使用 axios。在article You写的，他提到我们可以设置Vue.prototype.$http = axios，我可以在Vue实例中使用this.$http。它工作正常。

但是，如果我想为 $http 创建一个 axios 实例，比如

Vue.prototype.$http = axios.create({
  baseURL: 'https://app.herokuapp.com/'
})

当我使用 this.$http.get('/relativeURL') 时它不起作用。它似乎无法访问我设置的配置。也就是说，它不会向 https://app.herokuapp.com/relativeURL

发送请求

换句话说，如果我在任何其他对象中设置 axios 实例，例如 Vue.prototype.$axios = axios.create({config})。它运行成功。

有人可以解释为什么会这样吗？？

Answer 1

虽然在 Vue 实例级别定义它可能有其自身的优点，但我不喜欢污染全局命名空间。我的方法是，我有一个 gateway 文件夹，其中我有不同的 axios 实例文件，例如:

后端-api.js

import axios from 'axios'
export default axios.create({
  baseURL: 'http://YourAPiIp:9090/api/v1',
  timeout: 100000,
  headers: {
    'Content-Type': 'application/json'
  }
})

现在您可以将它导入到您想要的地方并使用它:

import backendApi from '../../gateways/backend-api'