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

Saurabh · Accepted Answer · 2017-04-14 09:41:09Z

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'

answered Apr 14, 2017 at 9:41

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Egor Stambakio · Accepted Answer · 2017-04-14 08:45:17Z

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

answered Apr 14, 2017 at 8:45

Egor Stambakio

18.2k5 gold badges37 silver badges35 bronze badges

1 Comment

PJCHENder Over a year ago

Sorry, it's a typo.

Collectives™ on Stack Overflow

Creating an instance of axios in Vue not working

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related