1. vue-h-ajax

vue-h-ajax

vue-h-ajax

npm version
npm
Build Status

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');