Switching from vue-resource to axios

Question

With vue-resource, we could set the root url in main.js like so:

Vue.http.options.root = 'http://localhost:3000/api'

I tried replacing that with:

axios.defaults.baseURL = 'http://localhost:3000/api';
Vue.prototype.$http = axios

However, now my post calls don't work as expected, and Vue.http.post throws an error.

How is this achieved?

Do not use absolute url path in instance method, you should use relative url — Erguotou, Feb 14 '17 at 10:05

Nicolas Heimann · Answer 1 · 2017-02-03T07:18:11.250

6

With axios, one can create another instance having a custom config

var my_axios = axios.create({
  baseURL: 'http://localhost:3000/api',
});

From here one can use my_axios for operations. You could prototype the custom axios instance into Vue:

Vue.prototype.$http = my_axios

edited Feb 03 '17 at 07:18

answered Jan 27 '17 at 08:23

Nicolas Heimann

2,561
16
27

score 1 · Answer 2 · answered Apr 30 '17 at 04:58

import axios from 'axios';

export const HTTP = axios.create({
  baseURL: `http://localhost:3000/api/`,
  headers: {
    Authorization: 'Bearer {token}'
  }
})

You could now use HTTP like so

<script>
import {HTTP} from './http-common';

export default {
  data: () => ({
    posts: [],
    errors: []
  }),

  created() {
    HTTP.get(`posts`)
    .then(response => {
      this.posts = response.data
    })
    .catch(e => {
      this.errors.push(e)
    })
  }
}
</script>

If you’d like to access this.$http like in vue-resource, you can just set Vue.prototype.$http = axios. — Emad Adly, Apr 30 '17 at 05:10

Switching from vue-resource to axios

2 Answers2