4

I am using axios for AJAX in Vue. In the article written by You, he mentioned that we can set Vue.prototype.$http = axios and I can use this.$http in Vue instance. It works fine.

However, if I want to create an axios instance to $http, like

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

It does not work when I use this.$http.get('/relativeURL'). It seems that it cannot access the config I set. That is, it will not send request to https://app.herokuapp.com/relativeURL

In another way, if I set axios instance in any other object, such as Vue.prototype.$axios = axios.create({config}). It works successfully.

Could someone explain why this happen ??

PJCHENder
  • 5,570
  • 3
  • 18
  • 35

2 Answers2

7

While defining it at Vue instance level might have its own merit, I don't like to pollute the global namespace. What my approach is, I have a gateway folder, where I have different files for axios instance, such as:

backend-api.js

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

Now you can import it the place you want and use it:

import backendApi from '../../gateways/backend-api'
Saurabh
  • 71,488
  • 40
  • 181
  • 244
1

You set

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

And use 

this.$http...

Typo in property name (https vs http).

Leave it as $http. Or simply don't even declare $http if it misleads you - use just this.axios.get...

Egor Stambakio
  • 17,836
  • 5
  • 33
  • 35