Reference article: https://www.cnblogs.com/Juphy/p/7073027.html , https://www.cnblogs.com/chenhuichao/p/8308993.html
Vue.js is data-driven, so that we do not need to directly operate DOM, if we do not use the DOM jQuery selector, there is no need to introduce jQuery. Vue.js vue-resource is a plug-in, it can initiate a request through the XMLHttpRequest or JSONP and process the response. In other words, $. Ajax can do, vue-resource plug-ins can do the same, but vue-resource API for more concise. Further, vue-resource provides a very useful function inteceptor, can be attached using inteceptor some behaviors and request before the request, such as the use inteceptor display screen when loading ajax request.
vue-resource features
vue-resource plugin has the following features:
1, a small volume
vue-resource is very small, only about 12KB, the server is enabled only after gzip compression 4.5KB in size after compression, which is much smaller than the volume of jQuery.
2, supports major browsers
And Vue.js Like, vue-resource in addition to IE 9 does not support the following browsers other mainstream browsers support.
3, support for Promise API and URI Templates
Promise is characteristic for ES6, Promise of the Chinese meaning "prophet", Promise objects for asynchronous computation.
URI Templates represents the URI template, somewhat similar to the ASP.NET MVC routing template.
4, interceptors
Interceptor is global, the interceptor can do some processing before and after transmission request and the transmission request.
Interceptor will be useful in some scenarios, such as requesting access_token disposed in front headers sent, or if the request fails to provide a common approach.
vue-resource installation
npm install vue-resource --save-dev
/ * * Introducing Vue frame /
Import view from 'View'
/ * * The introduction of resource requests plug /
import VueResource from 'vue-resource'
/ * Use VueResource plug * /
Vue.use (VueResource)
Examples CURD
1, GET requests
this.$http.get("this.apiUrl/id?key=value&key=value&key=value").then(response => {
}).catch(error => {
console.log ( 'json data acquisition failure' + error)
})
2, POST request
this.$http.post(this.apiUrl, this.item).then(response => {
}).catch(error => {
console.log ( 'json data acquisition failure' + error)
})
3, PUT request
this.$http.put(this.apiurl + '/' + id, this.item).then(response => {
}).catch(error => {
console.log ( 'json data acquisition failure' + error)
})
4, Delete Request
this.$http.delete(this.urlapi+'/'+id,{body: arr}).then(response => {
}).catch(error => {
console.log ( "Get Data json Failed" + error);
});
5, header carrying token, the interceptor 401 intercept
Vue.http.headers.common['token'] = window.localStorage.getItem('token')
Vue.http.interceptors.push((request, next) => {
next ((response) => {// response to the logic determining that modifications and then passed after the prior response. token for determining the time expired, is added here, the page http request at any one time here will be called first method
if (response.status === 401) {
} }) })