参考文章：https://www.cnblogs.com/Juphy/p/7073027.html 、https://www.cnblogs.com/chenhuichao/p/8308993.html
Vue.js是数据驱动的，这使得我们并不需要直接操作DOM，如果我们不需要使用jQuery的DOM选择器，就没有必要引入jQuery。vue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说，$.ajax能做的事情，vue-resource插件一样也能做到，而且vue-resource的API更为简洁。另外，vue-resource还提供了非常有用的inteceptor功能，使用inteceptor可以在请求前和请求后附加一些行为，比如使用inteceptor在ajax请求时显示loading界面。
vue-resource特点
vue-resource插件具有以下特点：
1、体积小
vue-resource非常小巧，在压缩以后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小，这远比jQuery的体积要小得多。
2、支持主流的浏览器
和Vue.js一样，vue-resource除了不支持IE 9以下的浏览器，其他主流的浏览器都支持。
3、支持Promise API和URI Templates
Promise是ES6的特性，Promise的中文含义为“先知”，Promise对象用于异步计算。
URI Templates表示URI模板，有些类似于ASP.NET MVC的路由模板。
4、支持拦截器
拦截器是全局的，拦截器可以在请求发送前和发送请求后做一些处理。
拦截器在一些场景下会非常有用，比如请求发送前在headers中设置access_token，或者在请求失败时，提供共通的处理方式。
vue-resource 安装
npm install vue-resource --save-dev
/*引入Vue框架*/
import Vue from 'vue'
/*引入资源请求插件*/
import VueResource from 'vue-resource'
/*使用VueResource插件*/
Vue.use(VueResource)
CURD实例
1、GET请求
this.$http.get("this.apiUrl/id?key=value&key=value&key=value").then(response => {
}).catch(error => {
console.log('获取json数据失败' + error)
})
2、POST请求
this.$http.post(this.apiUrl, this.item).then(response => {
}).catch(error => {
console.log('获取json数据失败' + error)
})
3、PUT请求
this.$http.put(this.apiurl + '/' + id, this.item).then(response => {
}).catch(error => {
console.log('获取json数据失败' + error)
})
4、Delete请求
this.$http.delete(this.urlapi+'/'+id,{body: arr}).then(response => {
}).catch(error => {
console.log("获取json数据失败" + error);
});
5、header携带token,拦截器拦截401
Vue.http.headers.common['token'] = window.localStorage.getItem('token')
Vue.http.interceptors.push((request, next) => {
next((response) => { // 在响应之后传给then之前对response进行修改和逻辑判断。对于token时候已过期的判断，就添加在此处，页面中任何一次http请求都会先调用此处方法
if (response.status === 401) {
} }) })