tb-vue-http

Vue http plugin

Description

A lightweight http plugin for vue, defaults to rest, with promises.

Usage

Install in your VueJS project:

npm i -s tb-vue-http

Import in main.js:

import HttpPlugin from 'tb-vue-http'

Create a server config:

let apiConfig = [
  {
    // will be available in all components with this.$api.get( ... ), this.$api.post( ... )
    name: "api",
    // the prefix for all requests
    url: "http://mydomain.com/api",
    headers: {
      // a header for all request
      "api-key": "1x2y3zasd456fgh789",
      // sometimes not known on start - will be evaluated before every request
      "Authorization": () => localStorage.getItem('my-auth-token')
    }
  },
  /*
    optional - define as many as you want
    will be available with (for example) this.$google.get( ... )
  */
  {
    name: "google",
    url: "http://google.com",
    headers: { }
  }
]

And install the plugin with it:

Vue.use(HttpPlugin, apiConfig)

---

And you are good to go!
Without headers:

• the response is already parsed (not the JSON string)
• the payload of post is serialized
• and has the 'Content-type': 'application/json' header

methods: {
  getTodo: function(id) {
    this.$api.get("/todos?id=" + id)
      .then(todoObj => this.myGetTodoSuccessHandler(todoObj))
      .catch(({ status, msg })=> this.myGetTodoErrorHandler({ status, msg }))
  },
  createTodo(title, desc) {
    this.$api.post("/todo/create", { title, desc })
      .then(res => this.myCreateTodoSuccessHandler(res))
      .catch(({ status, msg })=> this.myCreateTodoErrorHandler({ status, msg }))
  },
  updateTodo(todo) {
    this.$api.put("/todo/update/" + todo.id, todo)
      .then(res => this.myUpdateTodoSuccessHandler(res))
      .catch(({ status, msg })=> this.myUpdateTodoErrorHandler({ status, msg }))
  },
  deleteTodo(id) {
    this.$api.del("/todo/delete/" + id)
      .then(res => this.myDeleteTodoSuccessHandler(res))
      .catch(({ status, msg })=> this.myDeleteTodoErrorHandler({ status, msg }))
  }
}

Or with them:

• ONLY the default headers are applied
• No parsing/serializing anywhere

methods: {
  createSomething(dataObj) {
    let headers = {
      'Content-type': 'application/xml',
      'My-custom-header-only-for-this-request': 'whatever'
    }
    let payload = new myCustomXMLSerializer().serialize(dataObj)
    this.$api.post("/todo/create", payload, headers)
      .then(res => this.myParserAndSuccessHandler(res))
      .catch(({ status, msg })=> this.myErrorHandler({ status, msg }))
  }
}

You can use the low level api:

• Not even domain headers are added
• No parsing, serializing anywhere
• Do whatever you want with the request/response

methods: {
  patchSomething(someDataObj) {
    let headers = {
      'Content-type': 'application/xml',
      'My-custom-header-only-for-this-request': 'whatever'
    }
    let payload = new myCustomXMLSerializer().serialize(someDataObj)
    this.$api.request("PATCH", "http://whatever.com/stuff", headers, payload)
      .then(res => this.myParserAndSuccessHandler(res))
      .catch(({ status, msg })=> this.myErrorHandler({ status, msg }))
  }
}