Question

我在Vue中使用axios for AJAX。在您撰写的article中，他提到我们可以设置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'

Answer 2

你设置

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

并使用

this.$http...

属性名称中的错字（https vs http）。

保留为$ http。或者，如果它误导你，我们甚至不会声明$ http - 只使用this.axios.get ......

在Vue中创建axios实例无法正常工作

2 个答案: