Base service with Axios

a-vue-component.js

import { userService } from '@/services'

# ...

created () {
    this.isLoading = true
    this.id = this.$route.params.id

    userService
      .one(this.id)
      .then(({ data }) => {
        this.isLoading = false
        this.user = data.attributes
      })
      .catch(res => {
        this.isLoading = false
        throw res
      })
  },

base.js

import axios from 'axios'
import Vue from 'vue'


const baseService = axios.create({
  baseURL: 'http://localhost:4000/api/',
  headers: {
    'Accept': 'application/json',
    'Accept-Language': 'es',
    'Content-Type': 'application/json'
  },
  withCredentials: true
})

baseService.interceptors.response.use(
  function (response) {
    // Return unwrapped response ---the "body" of it
    return response.data
  },
  function (error) {
    // TODO: Do proper error handling here (logout user, etc)
    console.error(error)
  }
)


export default baseService

index.js

import sessionService from './session-service'
import userService from './user-service'


export {
  sessionService,
  userService
}

session-service.js

import baseService from './base-service'


export default {
  create (email, password) {
    return baseService
      .post('users/sign_in', { email, password })
  },
  delete () {
    return baseService
      .post('users/sign_out')
  },
  me () {
    return baseService
      .get('users/me')
  }
}

user-service.js

import baseService from './base-service'


export default {
  all () {
    return baseService
      .get('users')
  },
  one (id) {
    return baseService
      .get(`users/${id}`)
  },

  create (data) {
    return baseService
      .post('users', {user: data})
  },

  update (id, data) {
    return baseService
      .put(`users/${id}`, {user: data})
  },

  delete (id) {
    return baseService
      .delete(`users/${id}`)
  }
}