vue-h-ajax

vue-h-ajax

Edge 12+, FF 36+, Chrome 49+, or use translation from ES2105 to ES5

Introduction

vue-h-ajax is the small ajax module for Vue.js. It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze. Features include:

• Lightweight: 3.5kb of sources
• No dependencies
• try to parse data as JSON by default
• withCredentials by default
• DELETE request with body

Setup

npm install vue-h-ajax

Example

import Vue from 'vue';
import ajax from 'vue-h-ajax';


Vue.use(ajax);


Vue.http.get('/backend/users')
  .then(response => console.log(response.data))
  .catch(response => console.error(response.status));

Vue.http.stop('/backend/users');


const app = new Vue({
  template: '<div class="main"></div>',
  el: '#app',
  created() {
    this.$http.post('/backend/user', {name: 'Bill'}, {'Content-Type': 'application/json'})
      .then(response => {
        console.log(response.data.id);
      })
      .catch(response => console.error(response.status));
  }
});

API

withCredentials

• type: Boolean. Default true

import Vue from 'vue';
import ajax from 'vue-h-ajax';


Vue.use(ajax);

Vue.http.withCredentials = false;

headers

• type: Object

Global headers for all requests

import Vue from 'vue';
import ajax from 'vue-h-ajax';


Vue.use(ajax);

Vue.http.headers = {
  'Content-Type': 'application/json'
};

get(url, data, headers), post(...), put(...), delete(...)

• returns Promise<response>. Response format:

{
  "status": Number,
  "data": Any
}

stop(url)

Abort all current requests matched url

import Vue from 'vue';
import ajax from 'vue-h-ajax';


Vue.use(ajax);


Vue.http.get('/backend/users');
Vue.http.get('/backend/users');
Vue.http.get('/backend/users');

Vue.http.stop('/backend/users');