Creating an instance of axios in Vue not working

Question

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 ??

Answer 1

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'