CODEWITHSUNDEEP
javascriptvue.jsaxios
vikmalhotra
vikmalhotra

Reputation: 10071

how to modularize rest api calls using axios in vuejs

I am creating a vuejs app where I am using axios to consume my rest api. I am basically calling axios.get in various places, every time creating a new instance with the required authentication headers.

// UserdataComponent.vue
const anInstance = axios.create({
  headers: {'X-API-TOKEN': store.state.token},
  auth: {
    username: SOME_USERNAME,
    password: SOME_PASSWORD
  }
})
anInstance.get(API_BASE_URL + '/userdata')

This is being done everywhere I make a rest api call.

So I wanted to move this to a separate file to keep the code DRY.

I moved the axios instance creation code to a separate file and tried exporting it as an object. This object can then be imported wherever I want to consume rest api. I was expecting something like this to work....

// http.js
import axios from 'axios'
import store from 'store/store.js'

const HTTP = axios.create({
  baseURL: API_BASE_URL,
  headers: { 'X-API-TOKEN': store.state.token },
  auth: {
    username: SOME_USERNAME,
    password: SOME_PASSWORD
  }
})

export default HTTP


// UserdataComponent.vue
import HTTP from 'http.js'
...
HTTP.get('/userdata')

This gave me errors of all sorts with axios.create being returned as a string, instead of a callable function.

What should I be changing here to make it work as I want to? Should I even be using this way to modularize the http request mechanism?

Upvotes: 1

Views: 3400

Answers (2)

V. Sambor
V. Sambor

Reputation: 13399

I think you should use axios interceptors for this:

Axios.interceptors.request.use((config) => {
  // Add stuff to the config..
  // Add credentials to each request.
  config.withCredentials = true
  config.timeout = 10000
  config.headers['Accept-Language'] = i18n.locale
  config.headers['Content-Type'] = 'application/json'
  return config
})

You can place this code in your main file.

Each time you do a request, this code is called and you can add your credentials to the request, so you don't have to pass the same code everywhere...

For more information check https://github.com/axios/axios#interceptors and on the web around this subject.

Upvotes: 0

Atombob
Atombob

Reputation: 114

Not sure if this answers you question but it's a nice way of setting it up.

If you create the axios instance in a separate file, you could export specific api calls instead, making them accessible for other components as well.

// api.js
const HTTP = axios.create({
  baseURL: API_BASE_URL,
  headers: { 'X-API-TOKEN': store.state.token },
  auth: {
    username: SOME_USERNAME,
    password: SOME_PASSWORD
  }
})

export default {
  getSomeData () {
    return HTTP.get('/endpoint')
  },
  postSomeData (id, name) {
    return HTTP.post('/endpoint', {
      id: id,
      name: name
    })
  }
}

and then, in your component you import the api.jsand use like this: 

//component.vue
import myApi from '../path/to/api'

export default {
  name: 'myComponent',
  methods: {
    someMethod () {
      myApi.getSomeData().then((response) => {
        ...code
      })
    }
  }
}

Upvotes: 6

Related Questions