Vue进阶（幺伍肆）：vue-resource 应用

文章目录一、前言二、vue-resource 特点三、基本语法四、http 方法列表五、示例代码六、安装七、应用八、resource 服务应用九、拓展阅读一、前言vue-resource是Vue.js的一款插件它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说$.ajax能做的事情vue-resource插件一样也能做到而且vue-resource的API更为简洁。vue-resource是一个非常轻量的用于处理HTTP请求的插件它提供了两种方式来处理HTTP请求使用Vue.http或this.$http使用Vue.resource或this.$resource这两种方式本质上没有什么区别阅读vue-resource的源码可以得知第2种方式其实是基于第1种方式实现的。此外vue-resource还提供了拦截器inteceptor可以在请求前和请求后附加一些行为这意味着除了请求处理的过程请求的其他环节都可以由我们来控制。在Vue.js中完成ajax请求的方式有两种vue-resource和axios。Vue.js 2.0版本推荐使用axios来完成ajax请求。有关axios应用详参博文二、vue-resource 特点体积小vue-resource非常小巧在压缩以后只有大约12KB服务端启用gzip压缩后只有4.5KB大小这远比jQuery的体积要小得多。支持主流浏览器和Vue.js一样vue-resource除了不支持IE9以下的浏览器其他主流的浏览器都支持;支持Promise API和URI TemplatesPromise是ES6的特性Promise的中文含义为“先知”Promise对象用于异步计算。URI Templates表示URI模板有些类似于ASP.NET MVC的路由模板;支持拦截器拦截器是全局的拦截器可以在请求发送前和发送请求后做一些处理。 拦截器在一些场景下会非常有用比如请求发送前在headers中设置access_token或者在请求失败时提供共用的处理方式。有关拦截器的具体应用详参《Vue进阶幺伍伍vue-resource 拦截器interceptors使用》。三、基本语法引入vue-resource后可以基于全局Vue对象使用http也可以基于某个Vue实例使用http。基于全局Vue对象使用httpVue.http.get(/someUrl,[options]).then(successCallback,errorCallback);Vue.http.post(/someUrl,[body],[options]).then(successCallback,errorCallback);在一个Vue实例内使用$httpthis.$http.get(/someUrl,[options]).then(successCallback,errorCallback);this.$http.post(/someUrl,[body],[options]).then(successCallback,errorCallback);以下是一个简单的get应用示例// GET /someUrlthis.$http.get(/someUrl).then(response{// success callback},response{// error callback});四、http 方法列表vue-resource的请求API是按照REST风格设计的它提供了7种请求APIget(url, [options])head(url, [options])delete(url, [options])jsonp(url, [options])post(url, [body], [options])put(url, [body], [options])patch(url, [body], [options])除了jsonp以外另外6种的API名称都是标准的HTTP方法。当服务端使用REST API时客户端的编码风格和服务端的编码风格近乎一致这可以减少前端和后端开发人员的沟通成本。options对象发送请求时的options选项对象包含以下属性Response返回对象的参数以及对象的方法如下五、示例代码简单的post提交{// POST /someUrlthis.$http.post(/someUrl,{foo:bar}).then(response{// get statusresponse.status;// get status textresponse.statusText;// get Expires headerresponse.headers.get(Expires);// get body datathis.someDataresponse.body;},response{// error callback});}带查询参数和自定义请求头的GET请求:在这里插入代码片{// GET /someUrl?foobarthis.$http.get(/someUrl,{params:{foo:bar},headers:{X-Custom: ...}}).then(response{// success callback},response{// error callback});}获取图片并使用blob()方法从响应中提取图片的主体内容。// GET /image.jpgthis.$http.get(/image.jpg,{responseType:blob}).then(response{// resolve to Blobreturnresponse.blob();}).then(blob{// use image Blob});六、安装npm install vue-resource--save–save参数的作用是在我们的包配置文件package.json文件中添加对应的配置。安装成功后 可以查看package.json文件会发现多了vue-resource: ^1.3.4的配置。具体如下dependencies:{vue:^2.3.3,vue-resource:^1.3.4,vue-router:^2.7.0},七、应用通过以上步骤已经安装好了vue-resource但是在vue-cli中我们如何使用呢首先我们需要在main.js文件中导入并注册vue-resource:importVueResource from vue-resource Vue.use(VueResource)八、resource 服务应用vue-resource提供了另外一种方式访问HTTP——resource服务resource服务包含以下几种默认的actionget: {method: GET},save: {method: POST},query: {method: GET},update: {method: PUT},remove: {method: DELETE},delete: {method: DELETE}1、resource对象也有两种访问方式全局访问和局部访问。//全局访问Vue.resource//局部访问this.$resource可以结合URI Template一起使用以下示例的apiUrl都设置为{/id}了apiUrl:http://*.*.*.*:8080/api/customers{/id}{/id}相当于一个占位符当传入实际的参数时该占位符会被替换。例如{ id: vm.item.customerId}中的vm.item.customerId为12那么发送的请求URL为http://*.*.*.*:8080/api/customers/122、使用实例//使用get方法发送GET请求下面这个请求没有指定{/id}getCustomers:function(){varresourcethis.$resource(this.apiUrl),vmthis;resource.get().then((response){vm.$set(gridData,response.data);}).catch(function(response){console.log(response);})}//使用save方法发送POST请求下面这个请求没有指定{/id}createCustomer:function(){varresourcethis.$resource(this.apiUrl),vmthis;resource.save(vm.apiUrl,vm.item).then((response){vm.$set(item,{});vm.getCustomers();});this.showfalse;}//使用update方法发送PUT请求下面这个请求指定了{/id}updateCustomer:function(){varresourcethis.$resource(this.apiUrl),vmthis;resource.update({id:vm.item.customerId},vm.item).then((response){vm.getCustomers();})}九、拓展阅读《Vue进阶三Axios使用详解》《Vue进阶四使用 Vuex axios 发送请求》《vue-resource 拦截器interceptors使用》