3 levels of apicse

1.container-level.js

import { Container, ApiAbort } from 'apicase'

// I separated it for better understanding
import services from './services'

// Pass authorization token to every service
const headers = () => ({
  token: localStorage.getItem('token')
})

// Made our API accessible only for authorized users
const hooks = {
  before: { 
    name: 'Token validation', 
    handler (ctx, next) {
      return ctx.headers.token 
        ? next()
        : next(new ApiAbort('You are not authorized', { type: 'missedToken' }))
    } 
  },
  missedToken () {
    location.href = '/login'
  }
}

// Global mixins for our specific API
const mixins = {
  success () {
    return this.ok && this.result
      ? this.result.success
      : false
  },
  data () {
    return this.success
      ? this.result.data
      : null
  },
}

export default new Container ({
  base: '/api/v1',
  hooks,
  mixins,
  headers,
  services
})

2.service-level.js

import { ApiAbort } from 'apicase'

// Imagine that we have validation library
import validator from './validator'

// Fake user info
const user = {
  id: 1
}

export default {
  
  changeAva: {
    method: 'POST',
    url: '/files/upload',
    // It will be merged with global headers
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    // Merge hooks with global hooks
    hooks: {
      before (ctx, next) {
        return ctx.query instanceof FormData
          ? next()
          : next(new ApiAbort('Only FormData object is allowed'))
      },
      aborted (ctx, reason) {
        console.error(reason)
      }
    },
    // Specific mixins for that service
    mixins: {
      src () {
        return this.success && this.result
          ? `/images/avatars/${user.id}/${this.result.fileName}`
          : null
      }
    }
  },
  
  updateInfo: {
    method: 'POST',
    url: '/me/update',
    hooks: {
      before (ctx, next) {
        let form = validate(ctx.query)
        return !form.invalid
          ? next()
          : next(new ApiAbort(form.errors))
      },
      aborted (ctx, reason) {
        console.error(reason)
      }
    }
  }
  
}

3.call-level.js

// Example with Vue component
// See also https://github.com/apicase/vue-apicase
new Vue({
  data: {
    statusText: 'Not called',
  },
  template: `<div>{{statusText}} <button @click="go">Go</button>`,
  methods: {
    go () {
      let vm = this
      await container.go('someServce', { foo: 'bar' } {
        watchers: [(ctx, key, value) => {
          if (key !== 'pending') return
          vm.statusText = value ? 'Loading' : 'Finished'
        }]
      })
    }
  }
})