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