说说vue . js —— vue-资源攻略

时间：2021-09-06 来源：互联网编辑：宝哥软件园浏览：次

摘要

在上一篇文章中，我们介绍了如何使用$。ajax和Vue.js结合在一起，并实现了一个简单的跨域凝乳示例。Vue.js是数据驱动的，所以我们不需要直接操作DOM。如果我们不需要使用jQuery的DOM选择器，就没有必要引入jQuery。Vue-resource是Vue.js的一个插件，可以通过XMLHttpRequest或JSONP发起请求和处理响应。也就是说，vue-resource插件可以做什么$。ajax可以做到，vue-resource的API更简单。此外，vue-resource还提供了一个非常有用的拦截器功能。使用拦截器可以在请求前后附加一些行为，比如在ajax请求时使用拦截器显示加载界面。

本文的主要内容如下：

介绍了虚拟资源的特点，介绍了虚拟资源的基本用法，并在此基础上举例说明了添加、删除、检查和更改。$http，基于此添加、删除、检查和更改示例。$resource，基于拦截器实现请求等待时的加载屏幕，基于拦截器实现请求出错时的提示屏幕。60http://xiazai.jb51.net/201701/yuanma/vue-resource_jb51.rar

虚拟资源的特征

vue-resource插件具有以下特征：

1.小尺寸

Vue-resource很小，压缩后只有12KB左右，服务器上启用gzip压缩后只有4.5KB，比jQuery小很多。

2.支持主流浏览器

和Vue.js一样，vue-resource不支持IE 9以下的浏览器，但其他主流浏览器支持。

3.支持承诺应用编程接口和URI模板

Promise是ES6的一个特性，中文意思是“先知”，Promise对象用于异步计算。

URI模板代表URI模板，类似于ASP.NET MVC的路由模板。

4.支持拦截器

拦截器是全局的，拦截器可以在发送请求之前和之后做一些处理。

拦截器在某些情况下非常有用，例如在发送请求之前在标头中设置access_token，或者在请求失败时提供通用的处理方法。

虚拟资源的使用

引入虚拟资源

脚本src=' http : js/vue . js '/script script src=' http 3360 js/vue-resource . js '/脚本基本语法

随着Vue-resource的引入，http可以基于全局Vue对象或Vue实例来使用。

//使用httpVue.http.get ('/someurl '，[options])。然后(successcallback，errorcallback)基于全局vue对象；Vue.http.post('/someUrl '，[body]，[options])。然后(成功回调，错误回调)；//使用$ httpthis。$ http.get ('/someurl '，[选项])。然后(successcallback，errorcallback)在一个Vue实例中；这个。$http.post('/someUrl '，[body]，[options])。然后(成功回调，错误回调)；发送请求后，使用then方法处理响应结果。then方法有两个参数，第一个参数是响应成功时的回调函数，第二个参数是响应失败时的回调函数。

编写then方法的回调函数也有两种方式，第一种是传统的函数编写，第二种是ES 6比较简单的Lambda编写：

//传统的写法是这样的。$ http.get ('/someurl '，[选项])。然后(函数(响应){ //响应成功回调}，函数(响应){//响应错误回调})；//Lambda写成这样。$ http.get ('/someurl '，[选项])。然后((响应)={//对成功回调的响应}，(响应)={//对错误回调的响应})；PS:做过的人。NET开发一定对Lambda的编写有熟悉的感觉。

支持的HTTP方法

vue-resource的请求API是按照REST风格设计的，它提供了七个请求API:

get(url、[options]) head(url、[options]) delete(url、[options]) jsonp(url、[options]) post(url、[body]、[options]) put(url、[body]、[options]) patch (URL、[body]、[options])除了jsonp之外，其他六个API名称都是标准的HTTP方法。服务器使用REST API时，客户端的编码风格与服务器几乎一致，可以降低前端和后端开发者之间的通信成本。

客户端请求方法服务器处理方法。$ http.get(.)getxxxthis。$ http.post(.)postxxxthis。$ http.put(.)putxxxthis。$ http.delete(.)deletexxxoptions对象

发送请求时的options对象包含以下属性：

参数类型描述url字符串请求的URL方法，如' GET '，' POST '或其他HTTP方法body Object。URL参数对象标头对象请求标头超时formdata字符串请求正文参数对象请求请求在函数(请求)之前的超时时间(以毫秒为单位(0表示没有超时时间)请求发送之前的处理函数，类似于jQuery的beforeSend函数、progress函数(事件)、progress事件回调处理函数、credentials boolean，指示是否有必要将PUT、PATCH、Send DELETE请求作为HTTP POST发送，并将请求标头的x-http-method-override仿真JSON boolean设置为application/x-www-form-URL编码的内容类型发送请求正文

如果Web服务器无法处理PUT、PATCH、DELETE等REST请求，可以启用enulateHTTP现象。启用此选项后，将通过普通POST方法发送请求，并将HTTP头信息的x-HTTP-method-override属性设置为实际的HTTP方法。

Vue.http.options .仿真器=true仿真器的作用

如果Web服务器无法处理编码为application/json的请求，您可以启用OutLook ejson选项。启用此选项后，请求将采用application/x-www-form-URL encoded作为MIME类型，就像普通的HTML表单一样。

vue . http . options . Employeejson=true；响应对象

响应对象包含以下属性：

方法类型描述text()字符串返回响应体json() Object返回响应体blob()，因为json对象Blob以二进制形式返回响应体属性类型描述。当正常布尔响应的HTTP状态代码在200和299之间时，该属性是真实状态号响应的HTTP状态代码、状态文本字符串响应的状态文本、标题对象响应标题。注意：本文的vue-resource版本是v0.9.3，如果使用v0.9.0之前的版本，响应对象没有json()、blob()、text()方法。

凝乳示例

提示：下面的例子仍然使用了上一篇文章的组件和WebAPI，所以我就不贴组件的代码和页面的HTML代码了。

获取请求

var demo=new Vue({ El : ' # app }，data : { gridcolumns :[' customerId '，' companyName '，' contactName '，' phone']，grindata :[]，apirl : ' http://211 . 149 . 193 . 19:80/API/customers ' }，ready : function(){ this . getcustomers()}，methods: { getCustomers:$http.get(this.apiUrl)。然后((响应)={ this。$set('gridData '，这个程序的then方法只提供了successCallback，但是省略了errorCallback。

catch方法用于捕获程序的异常。catch方法不同于errorCallback。errorCallback只在响应失败时调用，而catch则在程序出错时从请求到响应的整个过程中调用。

在then方法的回调函数中，您也可以直接使用它，它仍然指向Vue实例：

getCustomers:函数(){ this。$http.get(this.apiUrl)。然后((响应)={ this。$ set(' Gridata '，响应。数据)})。catch(函数(响应){console。log (response)})}为了减少范围链的搜索，建议使用局部变量来接收这个。

JSONP请求

getcustomerss :函数(){这个.$http.jsonp(this.apiUrl).然后（函数（响应){这个.$ set(' GridAta '，response.data) })}POST请求

var demo=new Vue({ El : ' # app }，data: { show: false，grid columns :[{ name : ' customerId '，isKey: true }，{ name: 'companyName' }，{ name: 'contactName' }，{ name: 'phone' }]，grindata :[]，apiUrl: $ http.get(。然后((响应)={ vm .$ set(' GridAta '，response.data) }) }，createCustomer:函数(){ var vm=这个vm .$http.post(vm.apiUrl，vm.item).然后((响应)={ vm .$set('item '，{ })VM。getcustomers()})这一点。show=false } } })

放请求

updateCustomer:函数(){ var vm=此vm .$ http。放(这个。apirl/' VM . item。客户标识，虚拟机。项目).然后((响应)={ VM。getcustomers()})}

删除请求

删除客户：函数（客户){ var vm=此vm .$ http。删除(这个。“APiURl/”客户。customerid ).然后((响应)={ VM。getcustomers()})}

使用资源服务

虚拟资源提供了另外一种方式访问http ——资源服务，资源服务包含以下几种默认的行动：

get: {method: 'GET'}，save: {method: 'POST'}，query: {method: 'GET'}，update: {method: 'PUT'}，remove : { method : ' DELETE ' }，DELETE 33: { method 3: ' DELETE ' }资源对象也有两种访问方式：

全局访问：Vue.resource实例访问：这个$ resourceresource .可以结合上呼吸道感染模板一起使用，以下示例的apiUrl都设置为{/id}了：

apirl : ' http://211。149 .193 .' 19:8080/API/客户{/id } '

得到请求

使用得到方法发送得到请求，下面这个请求没有指定{/id}。

getcustomerss :函数(){ var resource=this .$ resource(此。apirl)VM=此资源。get().然后((响应)={ vm .$ set('(Gridata，response.data) }).捕捉(函数（响应){ console.log(响应)})}POST请求

使用救援方法发送邮政请求，下面这个请求没有指定{/id}。

createCustomer:函数(){ var resource=this .$ resource(此。apirl)VM=此资源。保存(虚拟机。APiURl，vm.item).然后((响应)={ vm .$set('item '，{ })VM。getcustomers()})这一点。show=false } PUT请求

使用更新方法发送放请求，下面这个请求指定了{/id}。

updateCustomer:函数(){ var resource=this .$ resource(此。apirl)VM=此资源。更新({ id : vm.item。customerid }，VM。项目).然后((响应)={ VM。getcustomers()})} {/id }相当于一个占位符，当传入实际的参数时该占位符会被替换。

例如，{ id: vm.item.customerId}中的vm.item.customerId为12,那么发送的请求统一资源定位器为：

http://211 .149 .1933368080/API/客户/12

删除请求

使用移动或删除方法发送删除请求，下面这个请求指定了{/id}。

删除客户：函数（客户){ var resource=this .$ resource(此。apirl)VM=此资源。删除({ id :客户。customerid }).然后((响应)={ vm.getCustomers() })使用受体

拦截器可以在请求发送前和发送请求后做一些处理。

基本用法

Vue.http .拦截器. push((请求，下一个)={ //.//请求发送前的处理逻辑//.下一个((响应)={ //.//请求发送后的处理逻辑//.//根据请求的状态，响应参数会返回给成功回调或错误回调返回响应})})在反应返回给成功回调或错误回调之前，你可以修改反应中的内容，或做一些处理。

例如，如果响应状态代码为404，则可以显示友好的404界面。

如果不想用Lambda函数，可以用平民写法：

Vue.http.interceptors.push(函数(请求，下一步){//.//请求发送前的处理逻辑/.next(函数(响应){//.//请求发送后的处理逻辑/.//根据请求状态，响应参数将返回成功回调或错误回调返回响应})})例1

在前面的凝乳例子中，用户体验不是很好。当用户使用某些功能时，如果网络较慢，屏幕没有给出反馈，用户不知道自己的操作是成功还是失败，不知道是否继续等待。

通过inteceptor，我们可以为所有的请求处理添加一个loading:发送请求前显示loading，收到响应后隐藏loading。

具体步骤如下：

1.添加加载组件

模板id=' loading-template ' Div class=' loading-overlay ' Div class=' sk-three-bounce ' Div class=' sk-child sk-bounce 1 '/Div class=' sk-child sk-bounce 2 '/Div class=' sk-child sk-bounce 3 '/Div/Div/template 2。将加载组件作为另一个Vue实例的子组件

Varhelp=newVue ({el:' # help '，data : { show loading : false }，components 3360 { ' loading ' 3360 { template 3360 ' # loading-template '，}) 3。将vue实例装载到一个HTML元素中

div id=' help ' loading v-show=' show loading '/loading/div 4。添加一个概念

Vue.http.interceptors.push((请求，下一个)={ loading.show=true next((响应)={ loading . show=false return response })；});

例2

当用户在屏幕上停留时间过长时，屏幕数据可能不是最新的。此时，如果用户删除或修改了某条数据，如果这条数据已经被其他用户删除，服务器会反馈一个404错误。但是，因为我们的put和delete请求不处理errorCallback，所以用户不知道他的操作是成功还是失败。

你问我为什么不在每个请求中处理errorCallback，因为我懒。这个问题也可以通过概念来解决。

1.继续使用上面的加载组件，并在#help元素下添加一个对话框

div id=' help ' loading v-show=' show loading '/loading modal-dialog : show=' show dialog ' Header class=' dialog-Header ' slot=' Header ' h1 class=' dialog-title ' server Error/h1/Header div class=' dialog-body ' slot=' body ' p class=' Error '哎呀，服务器出现一些错误，错误代码为： {{errorcode}}。/p/div/model-dialog/div 2。向帮助实例的数据选项添加两个属性

var help=new Vue({ el: '#help '，data: { showLoading: false，showDialog: false，errorCode: '' }，Components : { ' loading ' : { template : ' # loading-template '，}}) 3。修改概念

Vue.http.interceptors.push((请求，下一个)={ help.showLoading=true next((响应)={ if(！response . ok){ help . error code=response . status help . show dialog=true } help . show loading=false返回响应})；});